详解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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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上传图片存入数据库示例分享
2014/03/11 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
event.srcElement 用法笔记e.target
2009/12/18 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书