详解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键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
Eval and new funciton not the same thing
2012/12/27 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
python实现图像识别功能
2018/01/29 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python的Lambda函数用法详解
2019/09/03 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
.net面试题
2016/09/17 面试题
怎样写留学自荐信
2013/11/11 职场文书
打架检讨书500字
2014/01/29 职场文书
物业消防安全责任书
2014/07/23 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript