定制我的 create-react-app

React 的项目初始化一直是另我比较厌烦的点，虽然有 create-react-app（CRA）的存在，但是 CRA 只支持一些简单的配置，如果想更改 Webpack 的一些配置，可能就需要 eject 配置了。而维护一堆 Webpack 配置还是挺令人头疼的（主要是懒~）。

好在社区里有不错的解决方案 react-app-rewired，可以帮助我们更改 CRA 的配置，而又不需要 eject。

实践

使用 CRA 创建一个 React TypeScript 项目

npx create-react-app react-start --template typescript

添加 react-app-rewired

yarn add customize-cra react-app-rewired --dev

创建 config-overrides.js 文件，用来覆盖 CRA 的默认配置。

将 package.json 中的 scripts 修改为如下

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

注意：不要 eject 配置。

最后，运行

npm start

更改配置

使用 customize-cra 插件修改配置

const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addBundleVisualizer,
  addWebpackAlias,
  adjustWorkbox,
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // 开启装饰器支持
  addDecoratorsLegacy(),

  // 关闭 Webpack ESLint
  disableEsLint(),

  // 添加 webpack bundle visualizer 插件
  process.env.BUNDLE_VISUALIZE == 1 && addBundleVisualizer(),

  // 添加 alias 路径
  addWebpackAlias({
    ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js"),
  })
);

自定义配置

当 customize-cra 无法满足我们的需求时，我们可以编写自己的插件来修改 CRA 的配置

const { overrideDevServer } = require("customize-cra");

const setDevHeaders = (headers) => (config, env) => {
  config.headers = {
    ...config.headers,
    ...headers,
  };
  return config;
};

module.exports = {
  devServer: overrideDevServer(
    setDevHeaders({
      "X-Author": "sls",
    })
  ),
};

实践

更改配置

自定义配置

文档