使用craco修改create-react-app配置

[KrisGuoQin]

React App Configuration Override, an easy and comprehensible configuration layer for create-react-app

[KrisGuoQin]

安装

$ yarn add @craco/craco
# OR
$ npm install @craco/craco --save

在项目根目录创建配置文件

my-app
|-- node_modules
|-- craco.config.js
|--package.json

在配置文件中导出对象或者函数

/* craco.config.js */
/* export object */

export.default = {
   ...
}

/* craco.config.js */
/* export object */

export.default = function({env}){
  return {
      ....
  }
}

更新package.json中的scripts

/* package.json */

"scripts": {
- "start": "react-scripts start",
+ "start": "craco start",
- "build": "react-scripts build",
+ "build": "craco build",
- "test": "react-scripts test",
+ "test": "craco test",
}

启动项目

$ npm run start
# OR
$ yarn start

[KrisGuoQin]

我项目中用到的配置

const path = require('path');
const { whenProd } = require('@craco/craco');
const WebpackPluginReplaceApi = require('webpack-plugin-replace-api');
const ZipPlugin = require('zip-webpack-plugin');
const RemovePlugin = require('remove-files-webpack-plugin');

const ReplaceApiOptions = [
    {
        test: /\/example/g,
        target: 'http://api-dev.example.net'
    }
];

module.exports = {
    babel: {
        plugins: [
            'babel-plugin-jsx-control-statements',
            'ramda',
            [
                'import',
                {
                    libraryName: 'antd-mobile',
                    style: 'css'
                }
            ]
        ]
    },
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        configure: {
            output: {
                publicPath: './'
            }
        },
        plugins: [
            ...whenProd(() => [
                new RemovePlugin({
                    before: {
                        include: ['app.zip']
                    }
                }),
                new WebpackPluginReplaceApi(ReplaceApiOptions),
                new ZipPlugin({
                    path: path.join(__dirname),
                    filename: 'app.zip'
                })
            ], [])
        ]
    },
    eslint: {
        configure: {
            "env": {
                "jsx-control-statements/jsx-control-statements": true
            },
            "extends": [
                "plugin:jsx-control-statements/recommended"
            ],
            "plugins": [
                "jsx-control-statements"
            ],
            "rules": {
                "react/jsx-no-undef": [2, { "allowGlobals": true }],
                "jsx-control-statements/jsx-jcs-no-undef": 2
            }
        }
    },
    devServer: {
        proxy: {
            '/example': {
                target: 'http://api-dev.example.net/',
                changeOrigin: true
            }
        }
    },
    plugins: [
        {
            plugin: {
                overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => {
                    return devServerConfig;
                },
            }
        }
    ]
}