详解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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
Nov 28 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
Jul 27 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
JS前端宏任务微任务及Event Loop使用详解
Jul 23 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之Memcache学习笔记
2013/06/17 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python while 循环使用的简单实例
2016/06/08 Python
Python爬虫小技巧之伪造随机的User-Agent
2018/09/13 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python 字典套字典或列表的示例
2019/12/16 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
物业招聘计划书
2014/01/10 职场文书
安全标准化汇报材料
2014/02/03 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
初中作文评语集锦
2014/12/25 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python