create-react-app 中启用装饰器

最终的安装执行:

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,并添加以下内容:
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 的按需导入,安装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. 如若需要自定义主题,执行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 优化打包大小,执行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,
    })
)

你可能感兴趣的:(create-react-app 中启用装饰器)