详解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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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中的时间处理
2006/10/09 PHP
PHP技术开发技巧分享
2010/03/23 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
php xhprof使用实例详解
2019/04/15 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python操作redis数据库的三种方法
2020/09/10 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
自我评价个人范文
2013/12/16 职场文书
活动邀请函范文
2014/01/19 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
法律系毕业生求职信
2014/05/28 职场文书
大班亲子运动会方案
2014/06/10 职场文书
网络管理员岗位职责
2015/02/12 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS