create-react-app支持decorators

原创于 2021-09-02 14:42:23 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #node.js

React 专栏收录该内容

5 篇文章

订阅专栏

该博客教程介绍了如何配置create-react-app以支持decorators。首先，通过yarn添加了必要的Babel插件和preset。然后，创建了.babelrc文件来设置Babel解析器和启用legacy模式的decorators。接着，创建了config-overrides.js文件，用来自定义create-react-app的配置，包括设置别名和在生产环境中外部化某些库。最后，通过react-app-rewired修改package.json的脚本，以便在启动、构建和测试时使用自定义配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

create-react-app支持decorators

yarn add @babel/core @babel/plugin-proposal-decorators @babel/preset-env

1、创建.babelrc

{
    "presets":[
        "@babel/preset-env"
     ],
     "plugins":[
        [
            "@babel/plugin-proposal-decorators",
            {
                "legacy" : true
            }
        ]
     ]
}

2、创建config-overrides.js

const path = require('path')
const { override,addDecoratorsLegacy } = require( ' customize-cra ' )

function resolve(dir) {
    return path.join(_dirname, dir)
}

const customize = ()=> ( config, env) =>{
    config.resolve.alias['@']= resolve ('src')
    if (env === 'production') {
        config.externals = {
            'react' : 'React' ,
            'react-dom' : 'ReactDOM'
        }
    }
    return config
}

module.exports = override ( addDecoratorsLegacy( ), customize( ) )

3、安装依赖

yarn add customize-cra react-app-rewired

4、修改package.json

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