详解create-react-app 2.0版本如何启用装饰器语法
create-react-app(简称cra)已经更新之2.0.3版本,babel也更新至7.x版本,JavaScript装饰器语法虽然还不是标准,但是借助于babel,也能在项目里愉快的玩耍.
cra2.0时代如何启用装饰器语法呢?我们依旧采用的是react-app-rewired,通过劫持webpackcofig对象,达到修改的目的.
yarnaddreact-app-rewired
修改package.json
"scripts":{
"start":"react-app-rewiredstart",
"build":"react-app-rewiredbuild",
"test":"react-app-rewiredtest"
}
安装装饰器语法所需的babel插件,也可以顺带升级babel-core
yarnadd@babel/plugin-proposal-decoratorsmetro-react-native-babel-preset-D
在项目根目录下创建.babelrc,config-overrides.js文件
//.babelrc
{
"presets":["module:metro-react-native-babel-preset"],
"plugins":[
[
"@babel/plugin-proposal-decorators",
{
"legacy":true
}
]
]
}
//config-overrides
const{getBabelLoader}=require('react-app-rewired');
constpath=require('path');
module.exports=functionoverride(config,env){
constbabelLoader=getBabelLoader(config.module.rules);
constpwd=path.resolve();
babelLoader.include=[path.normalize(`${pwd}/src`)];
//usebabelrc
babelLoader.options.babelrc=true;
returnconfig;
};
原理就是劫持了config对象,对其babel规则进行简单的修改.
附上完整的package.json
{
"name":"my-react-project",
"version":"0.1.0",
"private":true,
"dependencies":{
"react":"^16.5.2",
"react-app-rewired":"^1.6.2",
"react-dom":"^16.5.2",
"react-scripts":"2.0.5"
},
"scripts":{
"start":"react-app-rewiredstart",
"build":"react-app-rewiredbuild",
"test":"react-app-rewiredtest"
},
"eslintConfig":{
"extends":"react-app"
},
"browserslist":[
">0.2%",
"notdead",
"notie<=11",
"notop_miniall"
],
"devDependencies":{
"@babel/plugin-proposal-decorators":"^7.1.2",
"metro-react-native-babel-preset":"^0.48.1",
"webpack-bundle-analyzer":"^3.0.3"
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。