详解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 concat数组累加 示例
Sep 03 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
Jquery ui css framework
2010/06/28 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Python进程间通信用法实例
2015/06/04 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python 实现多维数组转向量
2019/11/30 Python
python装饰器使用实例详解
2019/12/14 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
什么是python类属性
2020/06/10 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
打架检讨书100字
2014/01/08 职场文书
开展创先争优活动总结
2014/08/28 职场文书
教师个人学习总结
2015/02/11 职场文书