详解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 window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
基于jQuery的ajax方法封装
Jul 14 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
彻底弄懂 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删除文件夹的三种方法
2013/06/09 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
简单了解Python生成器是什么
2019/07/02 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
法学专业个人求职信
2013/09/26 职场文书
工厂见习报告范文
2014/10/31 职场文书
就业导师推荐信范文
2015/03/27 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python