详解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 相关文章推荐
jQuery.extend 函数详解
Feb 03 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
使用Vue生成动态表单
Nov 26 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Python 在函数上添加包装器
2020/07/28 Python
golang/python实现归并排序实例代码
2020/08/30 Python
python excel和yaml文件的读取封装
2021/01/12 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
C#笔试题集合
2013/06/21 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
素质拓展训练感想
2015/08/07 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL