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,
                },
              }),
            },

其他的配置不要动