使用 Create React App 创建一个新的项目后,可以如下配置装饰器
1.安装@babel/plugin-proposal-decorators
npm i @babel/plugin-proposal-decorators
2. npm i react-app-rewired customize-cra
3.修改package.json如下配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
4.在根目录下新建一个.babelrc文件写入
{
"presets": [
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-proposal-decorators",
{ "legacy": true }
]
]
}
5.在根目录下新建一个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())