详解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 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
深入理解js promise chain
May 05 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 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往windows中添加用户
2006/12/06 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
TensorFlow损失函数专题详解
2018/04/26 Python
深入浅析Python的类
2018/06/22 Python
python K近邻算法的kd树实现
2018/09/06 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
联强国际笔试题面试题
2013/07/10 面试题
企业消防安全制度
2014/02/02 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
会计岗位职责范本
2015/04/02 职场文书
调解协议书范本
2016/03/21 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL