React中customize-cra的應用

npm install react-app-rewired customize-cra babel-plugin-import -D

或者

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

項目根目錄創建文件config-overrides.js，其內容為

const {...} = require('customize-cra');

module.exports = override(
    ...
);

• React按需加載

config-overrides.js內容

const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,//或者css, true代表運用less
    }),
);

　　　　

修改package.json

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

 

• 運用LESS（無需暴露配置文件）

yarn add --dev less less-loader //less-loader用5.0版本，高版本停用了一些配屬性
//config-overrides.js內容

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

module.exports = override(

　　　addLessLoader({

        javascriptEnabled: true,

        modifyVars: {}

    }),

 );

 

• 裝飾器

 npm install -D @babel/plugin-proposal-decorators


//config-overrides.js
const { override, addDecoratorsLegacy} = require('customize-cra');

module.exports = override(
   ...
    addDecoratorsLegacy()
);

.....

更多應用，參考https://github.com/arackaf/customize-cra/blob/master/api.md#adddecoratorslegacy