create-react-app 2.x 自定義配置

來自： 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 配置文件裏，咱們能夠看到最近基本的配置。這些配置不必定符合當前的須要，例如，默認使用 CSS、Scss、Sass 進行樣式開發，實際可能使用 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-rewired 和 customize-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
    }),
);

一些簡單的配置已經好了。