react脚手架修改默认配置

react-create-app修改默认配置

前端开发过程中，总会因为各种各样的原因，需要修改webpack中的一些配置，比如引入第三方框架，而yarn eject是不可逆的操作，对于对webpack不熟悉的程序员，修改起来是很麻烦的。

接下来，换一种方法修改配置，比如引入antd-mobile

首先

yarn add react-app-rewired customize-cra -D这是重写配置所必须的插件

第二步

在根目录下创建config-overrides.js文件，代码如下

1、导入antd-mobile

下载yarn add babel-plugin-import -D，代码如下：

const { override, fixBabelImports} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    })
);

2、引用less

下载yarn add less less-loader,代码如下：

const { override, addLessLoader} = require('customize-cra');
module.exports = override(
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
        localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
    })
);

3、简化路径

开头引入组件，每次…/…/，真的很烦

const { override, addWebpackAlias} = require('customize-cra');
const path = require('path');
module.exports = override(
    addWebpackAlias({        
        ["@"]: path.resolve(__dirname, "src"),        
    })
);

这样设置后，你在文件引入组件，只需要import Logo from "@/Component/logo";
更多有关于react-app-rewired的使用，可以到这里查看https://github.com/arackaf/customize-cra

4、使用修饰器

当你在项目里，需要用到高阶组件时，多层嵌套，会让人感觉代码很繁重，尤其是还要和redux配合使用的时候。
下载yarn add @babel/plugin-proposal-decorators，代码如下：

const { override, addBabelPlugins} = require('customize-cra');
const path = require('path');
module.exports = override(
    addBabelPlugins(
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true
            }
        ]
    )
);

这里要提一句，在你完成以上步骤后，代码在编辑器里，仍然出现警告，但是这个丝毫不会影响使用，如果想要消除警告，只需要在根目录下，建jsconfig.json，里面内容如下：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

补充一下，以上操作完成后，记得修改一下package.json

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
   "eject": "react-scripts eject"
 }```