详解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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
原生js实现轮播图
Feb 27 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 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 Google的translate API代码
2008/12/10 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
jquery实现搜索框功能实例详解
2018/07/23 jQuery
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
利用Python为iOS10生成图标和截屏
2016/09/24 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
pandas如何处理缺失值
2019/07/31 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
环保倡议书400字
2014/05/15 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2015年财务部工作总结
2015/04/10 职场文书
旅游项目合作意向书
2015/05/08 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android