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

如何不使用eject修改create-react-app的配置

 更新時(shí)間:2021年04月14日 13:05:57   作者:胡哥有話說(shuō)  
許多剛開(kāi)始接觸create-react-app框架的同學(xué),不免都會(huì)有個(gè)疑問(wèn):如何在不執(zhí)行eject操作的同時(shí),修改create-react-app的配置。

一、為啥不建議執(zhí)行eject

1.執(zhí)行eject產(chǎn)生了什么變化?

create-react-app框架本身將webpack、babel的相關(guān)配置封裝在了react-scripts中,執(zhí)行yarneject后,會(huì)將webpack、babel等配置暴露在config目錄下,同時(shí)scripts目錄下會(huì)有新的命令文件更新,package.json文件中scripts命令同步更新。

2.執(zhí)行eject帶來(lái)了什么問(wèn)題?

首先,執(zhí)行eject是不可逆的,復(fù)雜的webpack等配置由框架本身轉(zhuǎn)交給用戶(hù)自己進(jìn)行維護(hù)了。

其次,在版本迭代時(shí),如果更新了react、react-scripts、eslint、tsconfig等依賴(lài),有可能會(huì)引起版本依賴(lài)的問(wèn)題,即使我們按錯(cuò)誤信息修復(fù)了之后,項(xiàng)目還是無(wú)法運(yùn)行。

所以我們一般不太建議使用yarneject的方式暴露create-react-app框架的配置。

二、有需求咋解決

實(shí)際開(kāi)發(fā)中,我們還是需要更新webpack、babel的配置,比如:

  • antd的按需加載;
  • 配置css預(yù)處理器-less;
  • 設(shè)置alias、externals;
  • 生產(chǎn)環(huán)境打包-去除console.log、debugger;
  • 打包結(jié)果優(yōu)化分析;
  • 打包增加進(jìn)度條提示;

前方高能預(yù)警~

yarn add react-app-rewired customize-c來(lái)完成配置的擴(kuò)展~

這里劃重點(diǎn),記住要考呦~

我們劃分幾個(gè)步驟,來(lái)一一實(shí)現(xiàn):

下載安裝依賴(lài)

yarn add react-app-rewired customize-cra -D

一般現(xiàn)在使用的版本是react-app-rewired@^2.1.8、customize-cra@^1.0.0

配置package.json的命令

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
}

在根目錄下配置config-overrides.js文件

module.exports = {}

完成了基礎(chǔ)配置后,我們?cè)赾onfig-overrides.js中進(jìn)行詳細(xì)配置,解決我們上面的需求問(wèn)題。

1.antd的按需加載

安裝依賴(lài):

yarn add antd -D

配置

cosnt { override, fixBabelImports } = require('customize-cra');
module.exports = override(
	fixBabelImports(
  	"import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  )

2.配置css預(yù)處理器-less

為啥在這里只強(qiáng)調(diào)了less呢,因?yàn)閏reate-react-app中內(nèi)置了sass/scss的預(yù)處理器,只需要使用時(shí)安裝相關(guān)的依賴(lài)就可以了(運(yùn)行時(shí),根據(jù)提示缺失的包進(jìn)行安裝即可)。

yarn add sass -D

接下來(lái)我們來(lái)less的是如何支持的

安裝依賴(lài):

yarn add less less-loader@7.3.0 -D

注意這里less-loader的版本less-loader@7.3.0,如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置時(shí)有問(wèn)題,所以使用了低版本的。

less-loader的最新版本其實(shí)是為了配合webpack@5.0使用的。

配置

const { override, addLessLoader } = require('customize-cra');
module.exports = override(
addLessLoader({
// 這里可以添加less的其他配置
lessOptions: {
   	// 根據(jù)自己需要配置即可~
    }
})
);

3.設(shè)置alias、externals;

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = override(
  // alias
addWebpackAlias({
    // 加載模塊的時(shí)候,可以使用“@”符號(hào)來(lái)進(jìn)行簡(jiǎn)寫(xiě)啦~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // 注意對(duì)應(yīng)的在public/index.html引入jquery的遠(yuǎn)程文件地址
    "jQuery": "jQuery"
  })

4.生產(chǎn)環(huán)境打包-去除console.log、debugger;

安裝依賴(lài)

yarnadduglifyjs-webpack-plugin-D

配置

const { override, addWebpackPlugin } = require('customize-cra');
const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = override(
	// 注意是production環(huán)境啟動(dòng)該plugin
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// 開(kāi)啟打包緩存
  		cache: true,
  		// 開(kāi)啟多線程打包
  		parallel: true,
  		uglifyOptions: {
  			// 刪除警告
  			warnings: false,
  			// 壓縮
  			compress: {
  				// 移除console
  				drop_console: true,
  				// 移除debugger
  				drop_debugger: true
  			}
  		}
  	})
  )

5.打包結(jié)果優(yōu)化分析;

安裝依賴(lài)

yarnaddwebpack-bundle-analyzercross-env-D

cross-env用于配置環(huán)境變量

配置

// package.json文件
"scripts": { "build:analyzer": "cross-env ANALYZER=true react-app-rewired build" }

// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = override(
  // 判斷環(huán)境變量ANALYZER參數(shù)的值
	process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
)

6.打包增加進(jìn)度條提示;

安裝依賴(lài)

yarnaddprogress-bar-webpack-plugin-D
const { override, addWebpackPlugin } = require('customize-cra');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
module.exports = override(
	addWebpackPlugin(new ProgressBarPlugin())
)

以上就是我們實(shí)現(xiàn)幾個(gè)需求的配置。我們來(lái)看看完整的config-overrides.js文件。

// config-overrides.js
cosnt { override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, addWebpackExternals } = require('customize-cra');
const path = require('path');
const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
module.exports = override(
	fixBabelImports(
  	"import",
    {
			"libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  ),
  addLessLoader({
		// 這里可以添加less的其他配置
		lessOptions: {
   		// 根據(jù)自己需要配置即可~
    }
	}),
  // alias
	addWebpackAlias({
    // 加載模塊的時(shí)候,可以使用“@”符號(hào)來(lái)進(jìn)行簡(jiǎn)寫(xiě)啦~
    '@': path.resolve(__dirname, './src/')
  }),
  // externals
  addWebpackExternals({
    // 注意對(duì)應(yīng)的在public/index.html引入jquery的遠(yuǎn)程文件地址
    "jQuery": "jQuery"
  }),
  // 注意是production環(huán)境啟動(dòng)該plugin
	process.env.NODE_ENV === 'production' && addWebpackPlugin(
  	new UglifyJsPlugin({
  		// 開(kāi)啟打包緩存
  		cache: true,
  		// 開(kāi)啟多線程打包
  		parallel: true,
  		uglifyOptions: {
  			// 刪除警告
  			warnings: false,
  			// 壓縮
  			compress: {
  				// 移除console
  				drop_console: true,
  				// 移除debugger
  				drop_debugger: true
  			}
  		}
  	})
  ),
  // 判斷環(huán)境變量ANALYZER參數(shù)的值
	process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  addWebpackPlugin(new ProgressBarPlugin())
)

到此這篇關(guān)于如何不使用eject修改create-react-app的配置的文章就介紹到這了,更多相關(guān)修改create-react-app的配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • React中如何使用scss

    React中如何使用scss

    這篇文章主要介紹了React中如何使用scss問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • 如何不使用eject修改create-react-app的配置

    如何不使用eject修改create-react-app的配置

    許多剛開(kāi)始接觸create-react-app框架的同學(xué),不免都會(huì)有個(gè)疑問(wèn):如何在不執(zhí)行eject操作的同時(shí),修改create-react-app的配置。
    2021-04-04
  • 減少react組件不必要的重新渲染實(shí)現(xiàn)方法

    減少react組件不必要的重新渲染實(shí)現(xiàn)方法

    這篇文章主要為大家介紹了減少react組件不必要的重新渲染實(shí)現(xiàn)方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • React組件傳children的方案總結(jié)

    React組件傳children的方案總結(jié)

    自定義組件的時(shí)候往往需要傳 children,由于寫(xiě)法比較多樣,我就總結(jié)了一下,文中有詳細(xì)的總結(jié)內(nèi)容和代碼示例,具有一定的參考價(jià)值,需要的朋友可以參考下
    2023-10-10
  • React Native中TabBarIOS的簡(jiǎn)單使用方法示例

    React Native中TabBarIOS的簡(jiǎn)單使用方法示例

    最近在學(xué)習(xí)過(guò)程中遇到了很多問(wèn)題,TabBarIOS的使用就是一個(gè),所以下面這篇文章主要給大家介紹了關(guān)于React Native中TabBarIOS簡(jiǎn)單使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。
    2017-10-10
  • 基于React?Hooks的小型狀態(tài)管理詳解

    基于React?Hooks的小型狀態(tài)管理詳解

    本文主要介紹一種基于?React?Hooks?的狀態(tài)共享方案,介紹其實(shí)現(xiàn),并總結(jié)一下使用感受,目的是在狀態(tài)管理方面提供多一種選擇方式。感興趣的小伙伴可以了解一下
    2021-12-12
  • react-native 圓弧拖動(dòng)進(jìn)度條實(shí)現(xiàn)的示例代碼

    react-native 圓弧拖動(dòng)進(jìn)度條實(shí)現(xiàn)的示例代碼

    本篇文章主要介紹了react-native 圓弧拖動(dòng)進(jìn)度條實(shí)現(xiàn)的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-04-04
  • React?中?memo?useMemo?useCallback?到底該怎么用

    React?中?memo?useMemo?useCallback?到底該怎么用

    在React函數(shù)組件中,當(dāng)組件中的props發(fā)生變化時(shí),默認(rèn)情況下整個(gè)組件都會(huì)重新渲染。換句話說(shuō),如果組件中的任何值更新,整個(gè)組件將重新渲染,包括沒(méi)有更改values/props的函數(shù)/組件。在react中,我們可以通過(guò)memo,useMemo以及useCallback來(lái)防止子組件的rerender
    2022-10-10
  • 如何創(chuàng)建自己的第一個(gè)React 頁(yè)面

    如何創(chuàng)建自己的第一個(gè)React 頁(yè)面

    React是用于構(gòu)建用戶(hù)界面的JavaScript庫(kù),本文主要介紹了如何創(chuàng)建自己的第一個(gè)React頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • react-router-domV6嵌套路由實(shí)現(xiàn)詳解

    react-router-domV6嵌套路由實(shí)現(xiàn)詳解

    這篇文章主要為大家介紹了react-router-domV6嵌套路由實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01

最新評(píng)論