詳解create-react-app 2.0版本如何啟用裝飾器語法
更新時(shí)間：2018年10月23日 10:07:33 作者：ppyuex
這篇文章主要介紹了詳解create-react-app 2.0版本如何啟用裝飾器語法，cra2.0時(shí)代如何啟用裝飾器語法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對象, 達(dá)到修改的目的
create-react-app(簡稱cra)已經(jīng)更新之2.0.3版本, babel也更新至7.x版本, JavaScript裝飾器語法雖然還不是標(biāo)準(zhǔn), 但是借助于babel, 也能在項(xiàng)目里愉快的玩耍.
cra2.0時(shí)代如何啟用裝飾器語法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對象, 達(dá)到修改的目的.
yarn add react-app-rewired
修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}
安裝裝飾器語法所需的babel插件, 也可以順帶升級(jí)babel-core
yarn add @babel/plugin-proposal-decorators metro-react-native-babel-preset -D
在項(xiàng)目根目錄下創(chuàng)建.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規(guī)則進(jìn)行簡單的修改.
附上完整的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"
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React Router V4使用指南(精講)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)原生下拉刷新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
簡談創(chuàng)建React Component的幾種方式
這篇文章主要介紹了創(chuàng)建React Component的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析
這篇文章主要為大家介紹了TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了react中涉及的增加,刪除list方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React路由渲染方式與withRouter高階組件及自定義導(dǎo)航組件應(yīng)用詳細(xì)介紹
這篇文章主要介紹了React路由三種渲染方式、withRouter高階組件、自定義導(dǎo)航組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
React結(jié)合Drag?API實(shí)現(xiàn)拖拽示例詳解
這篇文章主要為大家介紹了React結(jié)合Drag?API實(shí)現(xiàn)拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React的useEffect Hook它允許我們在函數(shù)組件中執(zhí)行副作用操作,但在使用過程中可能會(huì)遇到一些常見的錯(cuò)誤,本文就來介紹一下常見問題及解決,感興趣的可以了解一下2023-10-10
下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了使用store來優(yōu)化React組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10