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

其他的配置不要動

標籤：其他

上一篇：【前端必會】HtmlWebpackPlugin 和 SplitChunksPlugin 是什么？

下一篇：Bootstrap 筆記