详解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 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
javascript打印输出json实例
Nov 11 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
jquery仿微信聊天界面
May 06 jQuery
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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生成UTF8文件的方法
2010/05/15 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
学习ExtJS form布局
2009/10/08 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python表格存取的方法
2018/03/07 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
通过实例学习Python Excel操作
2020/01/06 Python
python numpy实现rolling滚动案例
2020/06/08 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
社会调查研究计划书
2014/05/01 职场文书
商铺门面租房协议书
2014/10/21 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书