使用 create-react-app 脚手架搭建 react 项目，释放配置文件且注入 less 依赖，并实现 And 的按需加载

使用 create-react-app 脚手架搭建 react 项目，释放配置文件且注入 less 依赖

使用 create-react-app 搭建项目

1. 使用npm安装create-react-app脚手架

   • // 全局安装 create-react-app 脚手架
     npm install -g create-react-app
     

2. 使用create-react-app脚手架创建项目

   • // 创建 react 项目 sharing-bicycle
     create-react-app sharing-bicycle
     

3. 根据需求加载项目所需依赖包

   • // 此处主要演示 less 和 less-loader 依赖包
     // 依赖包之间使用空格隔开，--save 将依赖包的信息写入 package.json 文件中
     npm install less less-loader --save
     

4. 释放配置文件

   • // 加载相应依赖之后，要将修改了的文件添加提交到本地仓库中，不然释放会报错
     // 方式一
     git add .
     git commit -m 'Save before ejecting.'
     // 方式二
     git commit -am 'Save before ejecting.'
     
     // 提交完成后，释放配置文件
     npm run eject
     

5. 注入less依赖

   • 找到config文件夹下的webpack.config.js文件，添加以下两端代码

     • // 先找到如下代码，可以使用 Ctrl+F 搜索任意单词
       
       // style files regexes
       const cssRegex = /\.css$/;
       const cssModuleRegex = /\.module\.css$/;
       const sassRegex = /\.(scss|sass)$/;
       const sassModuleRegex = /\.module\.(scss|sass)$/;
       
       // 在上述代码下添加如下两行代码
       
       // Provide less support
       const lessRegex =/\.less$/;
       const lessModuleRegex=/\.module\.less$/;
       

   • 使用 Ctrl+F 定位代码中cssRegex代码的使用地点

   • 依照cssRegex的书写方式配置less依赖

     • {
         test: lessRegex,
         exclude: lessModuleRegex,
         use: getStyleLoaders(
           {
             importLoaders: 2,
             sourceMap: isEnvProduction && shouldUseSourceMap,
           },
           'less-loader'
         ),
         sideEffects: true,
       },
       {
         test: lessModuleRegex,
         use: getStyleLoaders(
           {
             importLoaders: 2,
             sourceMap: isEnvProduction && shouldUseSourceMap,
             modules: true,
             getLocalIdent: getCSSModuleLocalIdent,
           },
           'less-loader'
         ),
       },
       

6. 完成以上步骤，可以添加.less样式文件测试，如果以上过程均无错误，运行项目则.less文件生效

7. 实现 Antd 的按需加载

   • 先下载 babel-plugin-import 插件
     • npm install babel-plugin-import --save
   • 在根目录下的 package.json 文件中添加如下代码

     • "babel": {
            "presets": [
                "react-app"
            ],
            "plugins": [
                [
                    "import",
                    {
                        "libraryName": "antd",
                        "style": true
                    }
                ]
            ]
        }
       

   • 目前为止，如果编译后报错，解决方法便是给 less 降版本到 3.0 以下便可