详解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遍历Table应用示例
Apr 09 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python 学习笔记
2008/12/27 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
详解Django CAS 解决方案
2019/10/30 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
物流专业求职信
2014/06/30 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers