react脚手架搭建的几种方式

发布时间:2022-09-25 23:44:00 来源:赢图云 阅读:288

react脚手架创建几种方式

  • node v16.17.0
  • npm 8.15.0
  • yarn 3.2.3
  • vite 3.1.3
  • 配置less-loader

npm

首先通过 npm 方式全局安装 create-react-app

npm install -g create-react-app

查看是否安装完成

create-react-app --version
5.0.1

查看帮助信息


Usage: create-react-app <project-directory> [options]

Options:
  -V, --version                            output the version number
  --verbose                                print additional logs
  --info                                   print environment debug info
  --scripts-version <alternative-package>  use a non-standard version of react-scripts
  --template <path-to-template>            specify a template for the created project
  --use-pnp
 

js

创建一个 普通 react-npm 项目

create-react-app project-name
cd 项目名
npm start

ts

添加配置命令 --template typescript

create-react-app project-name --template typescript
cd 项目名
npm start

yarn

使用yarn方式安装之前检查yarn是否安装

yarn --verison

如果未安装yarn 使用该命令

npm install yarn -g

通过yarn方式安装 create-react-app

yarn install -g create-react-app

js

create-react-app project-name
cd 项目名
yarn start

ts

create-react-app project-name --template typescript
cd 项目名
yarn start

vite

局部安装vite

npm install vite -D

全局安装vite

npm install vite -g

执行该命令可以选择对应模板

npm init vite@latest

或者使用 yarn 方式安装也可以

js


npm init vite-app 项目名 --template react
cd 项目名
npm install
npm run dev
npm run buil

ts

安装完毕之后执行该命令

cd 项目名称
npm install
npm run dev

结果如下

less-loader

添加less-loader 可以参考

  • webpack官网
  • less官网

如果配置不生效请执行


npm run eject 

如果执行报错,请先提交本地git缓存内容。

执行成功之后请在config目录中在webpack.config.js文件中修改配置

/*该内容大概在 70多行,找不到请搜索 cssRegex 或者 cssModuleRegex */
const lessRegex = /.(less)$/;
const lessModuleRegex = /.module.(less)$/;


/*添加loader配置  还是 搜索 cssRegex 或者 cssModuleRegex 找到配置,复制
css loader 的配置 ,然后将 匹配模块修改成 上面 lessRegex 和 lessMoudleRegex


{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'icss',
                },
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'local',
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
            },

*/

{
              test: lessRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'icss',
                },
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },
            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
            // using the extension .module.css
            {
              test: lessModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: {
                  mode: 'local',
                  getLocalIdent: getCSSModuleLocalIdent,
                },
              }),
            },





其他的配置不要动

美站网

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,
如果涉及侵权请联系站长邮箱:support@yingtwo.com 进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接: https://www.cnblogs.com/wuxin001/archive/2022/09/25/16729441.html

a
/template/Home/default/PC/Static