美文网首页
create-react-app 中启用装饰器

create-react-app 中启用装饰器

作者: soojade | 来源:发表于2020-01-10 17:02 被阅读0次

    最终的安装执行:

    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 中启用装饰器

          本文链接:https://www.haomeiwen.com/subject/tphmactx.html