create-react-app 中啟用裝飾器

最終的安裝執(zhí)行:

npm i -D customize-cra react-app-rewired babel-plugin-import less less-loader less-vars-to-js antd-dayjs-webpack-plugin
  1. npm i -D customize-cra react-app-rewired
  2. 在根目錄下新建文件config-overrides.js,并添加以下內(nèi)容:
const { override, addDecoratorsLegacy } = require('customize-cra')
module.exports = override(
    addDecoratorsLegacy()
)
  1. 修改package.json
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  1. 假如需要 antd 的按需導(dǎo)入,安裝babel-plugin-import,修改config-overrides.js
const { override, addDecoratorsLegacy, fixBabelImports } = require('customize-cra')
module.exports = override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css'
    })
)
  1. 如若需要自定義主題,執(zhí)行npm i -D less less-loader less-vars-to-js,然后修改config-overrides.js
const fs = require('fs')
const path = require('path')
const { override, addDecoratorsLegacy, fixBabelImports, addLessLoader } = require('customize-cra')
const lessToJS = require('less-vars-to-js')

const themeVariables = lessToJS(
    fs.readFileSync(path.resolve(__dirname, './src/theme.less'), 'utf8')
)

module.exports = override(
    addDecoratorsLegacy(),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: themeVariables,
    })
)
  1. 使用 Day.js 替換 momentjs 優(yōu)化打包大小,執(zhí)行npm i -D antd-dayjs-webpack-plugin,最終配置如下:
const fs = require('fs')
const path = require('path')
const { override,
    addDecoratorsLegacy,
    fixBabelImports,
    addLessLoader,
    addWebpackPlugin } = require('customize-cra')
const lessToJS = require('less-vars-to-js')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')

const themeVariables = lessToJS(
    fs.readFileSync(path.resolve(__dirname, './src/theme.less'), 'utf8')
)

module.exports = override(
    addDecoratorsLegacy(),
    addWebpackPlugin(new AntdDayjsWebpackPlugin()),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: themeVariables,
    })
)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容