详解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 相关文章推荐
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
简单的前端js+ajax 购物车框架(入门篇)
Oct 29 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
Bootstrap table右键功能实现方法
Feb 20 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
彻底弄懂 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 学习路线与时间表
2010/02/21 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
php图片上传类 附调用方法
2016/05/15 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
用js遍历 table的脚本
2008/07/23 Javascript
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
基于Python的接口测试框架实例
2016/11/04 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
JAVA程序员面试题
2012/10/03 面试题
国庆节文艺活动方案
2014/02/03 职场文书
公开承诺书格式
2014/05/21 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL