4
来自:create-react-app 2.x 自定义配置

创建项目

跟着文档提示,一步一步安装。

## 安装 create-react-app
npm i -g create-react-app

## 进入某个工作路径
cd yourpath

## 创建项目
npm init react-app customize-demo

## 等待项目依赖安装完成,根据控制台提示,可以 npm run start 开始使用

webpack.config.js 配置文件里,我们可以看到最近基本的配置。这些配置不一定符合当前的需要,例如,默认使用 CSSScssSass 进行样式开发,实际可能使用 Less,那么,我们需要自己添加配置。

如果我们要手动修改配置,官方提供了一个方式 npm run eject,但是这个方式不可逆。文档

Note: this is a one-way operation. Once you eject, you can’t go back!

另外可以通过第三方工具进行修改,这里推荐 react-app-rewired

使用 react-app-rewired 自定义配置

注意

react-app-rewired 1.x 配合 create-react-app 1.x

react-app-rewired 2.x 配合 create-react-app 2.x

版本升级导致互不兼容,另外,react-app-rewired 2.x 应该是社区维护了。

在 react-app-rewired 1.x 的版本中,它除了提供覆盖配置的方法,还体用了一些 helpers,例如 rewireLess、rewirePreact 等,2.x 版本只保留了核心功能。

From README:

Version 2.0 removes the rewire helper functions

All helper functions:

  • injectBabelPlugin
  • compose
  • getBabelLoader
  • getLoader
  • babelLoaderMatcher
  • loaderNameMatches

have been removed with commit 0848602

另外一个工具帮我们实现了这些,customize-cra,这次我们将使用 react-app-rewiredcustomize-cra 一起倒腾。

## 安装依赖

npm install customize-cra react-app-rewired --save-dev

修改项目的 package.json

{
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom"
    }
}
原来用 react-scripts 命令启动项目,现在改成 react-app-rewired 命令。

接着在项目根目录新建文件,命名为 config-overrides.js,也不一定要在根目录,如果要规范化开发,可以在 package.json 指定某个路径下的文件。

"config-overrides-path": "node_modules/some-preconfigured-rewire"

react-app-rewired 的方式自定义配置,参考 Extended Configuration Options 文档。

这次我们使用 customize-cra 协助自定义,参考 Using the plugins 文档。

// 基本格式
const { override } = require('customize-cra');

module.exports = override();

使用 Less

## 安装依赖
npm i --save less less-loader

修改配置文件

const { override, addLessLoader } = require('customize-cra');

module.exports = override(addLessLoader());

.less 文件以及能被 less-loader 解析,并且 .module.less 文件将会使用 CSS Modules。自定义 CSS Modules 的 localIdentName 配置,修改 addLessLoader({ localIdentName: '[local]--[hash:base64:5]' }) 即可。

antd

假设我们要使用 antd,参考 高级配置 文档。

npm i --save-dev babel-plugin-import
npm i --save antd
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),    
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
        localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
    }),
);

decorators

在 create-react-app 的 Can I Use Decorators 文档中说,当前它并不是一个文档的规范,默认不推荐使用,如果要使用,需要自己手动开启。

npm i --save-dev @babel/plugin-proposal-decorators
const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy } = require('customize-cra');

module.exports = override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),    
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
        localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
    }),
);

添加别名

const { override, fixBabelImports, addLessLoader, addDecoratorsLegacy, addWebpackAlias } = require('customize-cra');

module.exports = override(
    addDecoratorsLegacy(),
    addWebpackAlias({
        ["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")
    }),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),    
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
        localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName
    }),
);

一些简单的配置已经好了。


OnlyLing
215 声望3 粉丝

成长中的前端工程师。