详解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 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
Javascript Promise用法详解
May 10 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python正则表达式学习小例子
2020/03/03 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
python实现在线翻译
2020/06/18 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
校三好学生主要事迹
2014/01/11 职场文书
社区消防工作实施方案
2014/03/21 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
微信小程序调用python模型
2022/04/21 Python