详解create-react-app 2.0版本如何启用装饰器语法


Posted in Javascript onOctober 23, 2018

create-react-app(简称cra)已经更新之2.0.3版本, babel也更新至7.x版本, JavaScript装饰器语法虽然还不是标准, 但是借助于babel, 也能在项目里愉快的玩耍.

cra2.0时代如何启用装饰器语法呢? 我们依旧采用的是react-app-rewired, 通过劫持webpack cofig对象, 达到修改的目的.

yarn add react-app-rewired

修改package.json

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

安装装饰器语法所需的babel插件, 也可以顺带升级babel-core

yarn add @babel/plugin-proposal-decorators metro-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');

const path = require('path');

module.exports = function override(config, env) {
 const babelLoader = getBabelLoader(config.module.rules);
 const pwd = path.resolve();
 babelLoader.include = [path.normalize(`${pwd}/src`)];
 // use babelrc
 babelLoader.options.babelrc = true;
 
 return config;
};

原理就是劫持了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-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
 },
 "eslintConfig": {
  "extends": "react-app"
 },
 "browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
 ],
 "devDependencies": {
  "@babel/plugin-proposal-decorators": "^7.1.2",
  "metro-react-native-babel-preset": "^0.48.1",
  "webpack-bundle-analyzer": "^3.0.3"
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
javascript连续赋值问题
Jul 08 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
jquery实现图片切换代码
Oct 13 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
基于react框架使用的一些细节要点的思考
May 31 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
彻底弄懂 JavaScript 执行机制
Oct 23 #Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 #Javascript
浅谈JavaScript 代码整洁之道
Oct 23 #Javascript
使用jquery Ajax实现上传附件功能
Oct 23 #jQuery
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 #Javascript
jquery实现动态添加附件功能
Oct 23 #jQuery
Vue创建头部组件示例代码详解
Oct 23 #Javascript
You might like
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
简单的JS轮播图代码
2016/07/18 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
五种Python转义表示法
2020/11/27 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
软件测试题目
2013/02/27 面试题
工作时间上网检讨书
2014/02/03 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
幼儿园三八妇女节活动方案
2014/03/11 职场文书
中国好声音广告词
2014/03/18 职场文书
文秘求职信范文
2014/04/10 职场文书
小学生操行评语大全
2014/04/22 职场文书
同学毕业留言寄语
2015/02/27 职场文书
新员工试用期自我评价
2015/03/10 职场文书
检讨书怎么写
2015/05/07 职场文书
硕士论文致谢范文
2015/05/14 职场文书
《小小的船》教学反思
2016/02/18 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书