详解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" } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。