摘要

首先通过 npm 方式全局安装 create-react-app查看是否安装完成查看帮助信息创建一个 普通 react-npm 项目

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

其他的配置不要动