详解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 相关文章推荐
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
简单的js表单验证函数
2013/10/28 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python绘制七段数码管实例代码
2017/12/20 Python
Python星号*与**用法分析
2018/02/02 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
什么是类的返射机制
2016/02/06 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
初中英语教学反思
2014/01/25 职场文书
科研先进个人典型材料
2014/01/31 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
mysql序号rownum行号实现方式
2022/12/24 MySQL