詳解create-react-app 2.0版本如何啟用裝飾器語(yǔ)法
create-react-app(簡(jiǎn)稱cra)已經(jīng)更新之2.0.3版本, babel也更新至7.x版本, JavaScript裝飾器語(yǔ)法雖然還不是標(biāo)準(zhǔn), 但是借助于babel, 也能在項(xiàng)目里愉快的玩耍.
cra2.0時(shí)代如何啟用裝飾器語(yǔ)法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對(duì)象, 達(dá)到修改的目的.
yarn add react-app-rewired
修改package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}
安裝裝飾器語(yǔ)法所需的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對(duì)象, 對(duì)其babel規(guī)則進(jìn)行簡(jiǎ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"
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React項(xiàng)目經(jīng)驗(yàn)總結(jié)及遇到的坑
這篇文章主要介紹了React項(xiàng)目經(jīng)驗(yàn)總結(jié),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
React項(xiàng)目打包發(fā)布到Tomcat頁(yè)面空白問題及解決
這篇文章主要介紹了React項(xiàng)目打包發(fā)布到Tomcat頁(yè)面空白問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了React腳手架搭建的學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)導(dǎo)航欄二級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
react render props模式實(shí)現(xiàn)組件復(fù)用示例
本文主要介紹了react render props模式實(shí)現(xiàn)組件復(fù)用示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
react項(xiàng)目?jī)?yōu)化配置的操作詳解
這篇文章主要介紹了react項(xiàng)目?jī)?yōu)化配置,主要包括優(yōu)化配置CDN，優(yōu)化路由懶加載，結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
這篇文章主要為大家介紹了React的生命周期函數(shù)初始掛載更新移除詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React?數(shù)據(jù)共享useContext的實(shí)現(xiàn)
本文主要介紹了React?數(shù)據(jù)共享useContext的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
React Native AsyncStorage本地存儲(chǔ)工具類
這篇文章主要為大家分享了React Native AsyncStorage本地存儲(chǔ)工具類，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家介紹了React的createElement方法源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09