欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解create-react-app 2.0版本如何啟用裝飾器語法

 更新時間：2018年10月23日 10:07:33   作者：ppyuex  
這篇文章主要介紹了詳解create-react-app 2.0版本如何啟用裝飾器語法，cra2.0時代如何啟用裝飾器語法呢? 我們依舊采用的是react-app-rewired, 通過劫持webpack cofig對象, 達(dá)到修改的目的

create-react-app(簡稱cra)已經(jīng)更新之2.0.3版本, babel也更新至7.x版本, JavaScript裝飾器語法雖然還不是標(biāo)準(zhǔn), 但是借助于babel, 也能在項目里愉快的玩耍.

cra2.0時代如何啟用裝飾器語法呢? 我們依舊采用的是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插件, 也可以順帶升級babel-core

yarn add @babel/plugin-proposal-decorators metro-react-native-babel-preset -D

在項目根目錄下創(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項目經(jīng)驗總結(jié)及遇到的坑

    React項目經(jīng)驗總結(jié)及遇到的坑

    這篇文章主要介紹了React項目經(jīng)驗總結(jié),本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-07-07
  • React項目打包發(fā)布到Tomcat頁面空白問題及解決

    React項目打包發(fā)布到Tomcat頁面空白問題及解決

    這篇文章主要介紹了React項目打包發(fā)布到Tomcat頁面空白問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • React腳手架搭建的學(xué)習(xí)

    React腳手架搭建的學(xué)習(xí)

    本文主要介紹了React腳手架搭建的學(xué)習(xí)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-12-12
  • react實現(xiàn)導(dǎo)航欄二級聯(lián)動

    react實現(xiàn)導(dǎo)航欄二級聯(lián)動

    這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)導(dǎo)航欄二級聯(lián)動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • react render props模式實現(xiàn)組件復(fù)用示例

    react render props模式實現(xiàn)組件復(fù)用示例

    本文主要介紹了react render props模式實現(xiàn)組件復(fù)用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • react項目優(yōu)化配置的操作詳解

    react項目優(yōu)化配置的操作詳解

    這篇文章主要介紹了react項目優(yōu)化配置,主要包括優(yōu)化配置CDN，優(yōu)化路由懶加載，結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-06-06
  • React的生命周期函數(shù)初始掛載更新移除詳解

    React的生命周期函數(shù)初始掛載更新移除詳解

    這篇文章主要為大家介紹了React的生命周期函數(shù)初始掛載更新移除詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-08-08
  • React?數(shù)據(jù)共享useContext的實現(xiàn)

    React?數(shù)據(jù)共享useContext的實現(xiàn)

    本文主要介紹了React?數(shù)據(jù)共享useContext的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • React Native AsyncStorage本地存儲工具類

    React Native AsyncStorage本地存儲工具類

    這篇文章主要為大家分享了React Native AsyncStorage本地存儲工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-10-10
  • React createElement方法使用原理分析介紹

    React createElement方法使用原理分析介紹

    這篇文章主要為大家介紹了React的createElement方法源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09

最新評論