详解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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
jQuery select控制插件
Aug 17 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JS变量提升原理与用法实例浅析
May 22 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
简介JavaScript错误处理机制
Aug 04 Javascript
浅谈JS的原型和原型链
Jun 04 Javascript
彻底弄懂 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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python opencv之分水岭算法示例
2018/02/24 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
工作表扬信的范文
2014/01/10 职场文书
保健品市场营销方案
2014/03/31 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
详解非极大值抑制算法之Python实现
2021/06/28 Python