详解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从头学起第三讲
Jul 06 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
javascript数据类型示例分享
Jan 19 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
基于vue的换肤功能的示例代码
Oct 10 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
7个你应该知道的JS原生错误类型
Apr 29 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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后门URL的防范
2013/11/12 PHP
php动态生成函数示例
2014/03/21 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
jQuery实现鼠标划过添加和删除class的方法
2015/06/26 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python与C互相调用的方法详解
2017/07/14 Python
详解python数据结构和算法
2019/04/18 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
详解python中的异常捕获
2020/12/15 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2015暑假假期总结
2015/07/13 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
GPU服务器的多用户配置方法
2022/07/07 Servers