create-react-app開(kāi)發(fā)常用配置教程
引言
注: 如未找到配置文件請(qǐng)使用npm run eject彈出配置文件
當(dāng)前對(duì)應(yīng)版本react 16.2
設(shè)置代理
在開(kāi)發(fā)中往往是跨域請(qǐng)求的，配置一下請(qǐng)求代理可以解決這個(gè)問(wèn)題
// package.json 文件 "proxy": "http://xxx.xxx",
模塊熱替換(HMR)
默認(rèn)情況下在每次修改內(nèi)容的時(shí)候都會(huì)刷新頁(yè)面，有時(shí)候我們并不想要這樣，比如有一個(gè)bug需要重復(fù)點(diǎn)擊或者重復(fù)操作多次才能實(shí)現(xiàn)，但是由于我們每次修改都會(huì)刷新頁(yè)面，可能會(huì)導(dǎo)致這個(gè)bug很難被測(cè)試或者實(shí)現(xiàn)，這個(gè)配置在我看來(lái)非常有用，當(dāng)然這不是必須的，但是可以適當(dāng)?shù)奶岣唛_(kāi)發(fā)效率。在React 的入口文件 src/index.js中，添加一些配置代碼。
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
// +++++ 加入+++++
if (module.hot) {
module.hot.accept();
}
css局部化
- 正常導(dǎo)入css情況下會(huì)污染到全局
- 修改 webpack-config-dev.js 及 webpack-config-prod.js 配置
options: {
modules: true,
localIdentName: '__[local]--[hash:base64:5]'
}
注意: 使用 css-module會(huì)導(dǎo)致 ant 樣式失效...其次有其他css局部化解決方案 比如 styled-components可參考我另外一篇文章 騷里騷氣的styled-components快速入門(mén)
支持裝飾器寫(xiě)法
比如redux或者mobx可以使用@寫(xiě)法
安裝 transform-decorators-legacy
npm install --save-dev babel-plugin-transform-decorators-legacy
插件中使用legacy是因?yàn)锽abel 5支持處理裝飾器，但是它也許會(huì)跟最終的標(biāo)準(zhǔn)有區(qū)別，所以才使用legacy這個(gè)詞。
// package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
// +++ 加入配置 +++
"transform-decorators-legacy",
// ...ant配置
]
}
請(qǐng)注意， plugins 的屬性非常重要: transform-decorators-legacy 應(yīng)該放在最前面。 babel 設(shè)置有問(wèn)題？請(qǐng)先查看這個(gè) issue 。
打包后路徑問(wèn)題導(dǎo)致頁(yè)面空白
// package.json 文件增加配置 ... "homepage": ".", ...
注: 如果直接打開(kāi)index.html后文件正確加載但頁(yè)面仍然空白，請(qǐng)檢查你是否使用的是 BrowserRouter (同vue的history模式)需要后端配置支持，否則請(qǐng)使用HashRouter 即帶 #
配置簡(jiǎn)化路徑
當(dāng)頁(yè)面嵌套過(guò)深時(shí)我們會(huì)發(fā)現(xiàn)在路徑通常都要這么寫(xiě)
import xx from './../../../xxx/qqq'通過(guò)配置webpack可以寫(xiě)成import xx from '@/xxx/qqq'
// 修改 webpack.config.dev 與 webpack.config.prod 兩個(gè)文件 加入相同配置
...
// +++ 找個(gè)開(kāi)心的地方加入配置
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
// 修改
alias: {
'react-native': 'react-native-web',
// +++ 加入配置
'@': resolve('src')
}
- 優(yōu)點(diǎn): 如果按照相對(duì)路徑的方法引用，每次要計(jì)算.. 并且文件一旦遷移 那么又要重新計(jì)算，如此配置文件遷移也不需要計(jì)算
- 缺點(diǎn): 在部分編輯器可能會(huì)失去文件引用高亮(比如webstrom), 并且不能通過(guò)快捷鍵快速查找其引用.
注 : 這屬于webpack的配置，當(dāng)然在vue-cli中也適用(更新:目前vue-cli已經(jīng)默認(rèn)支持這種配置)
按需引用antd-mobile（antd同）
- 安裝 antd-mobile npm i antd-mobile -S
- 安裝 babel-plugin-import npm i babel-plugin-import -D
// package.json 文件
"babel": {
"presets": [
"react-app"
],
// 加入配置
"plugins": [
// 如果使用了 定制顏色功能 將 "css" => true 同時(shí)需要配置 less
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}
打包構(gòu)建分析
build之后發(fā)現(xiàn)包體積比較大，用 webpack-bundle-analyzer 分析各個(gè)js文件的打包
// webpack.config.prod.js
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...code
// 找到 plugins 記得別加錯(cuò)地方 很多 new xxx()的才是
plugins: [
new xxx(),
new xxx(),
// +++++
new BundleAnalyzerPlugin(),
]
生產(chǎn)環(huán)境去掉map文件
有時(shí)候你會(huì)發(fā)現(xiàn)build時(shí)間過(guò)長(zhǎng)，參見(jiàn)npm run build takes 1-2 hours to build 我們可以去除掉map文件構(gòu)建
// webpack.config.prod.js - devtool: shouldUseSourceMap ? 'source-map' : false // 改為 devtool: false,
配置less
安裝
yarn add less-loader less --dev
// webpack.config.dev.js
module: {
strictExportPresence: true,
//...
rules: [
// ...
{
test: /\.(css|less)$/, // 修改
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {},
},
// 增加
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},
]
// webpack.config.prod.js
{
test: /\.(css|less)$/, // 修改
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
// ...code
{
loader: require.resolve('less-loader') // 增加
}
],
},
extractTextPluginOptions
)
),
}
配置不同環(huán)境變量
由于create-react-app 忽略了 env.NODE_ENV 環(huán)境變量的設(shè)置，參考文檔 但是有時(shí)候在一些項(xiàng)目中，我們可能需要根據(jù)不同的環(huán)境變量使用不同的配置，那么我們可以這么做:
如果需要自定義環(huán)境變量 必須以REACT_APP_開(kāi)頭
// 修改package.json
"scripts": {
"start": "cross-env REACT_APP_SECRET_API=development node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
// 這三個(gè)是我加的 可以根據(jù)你的業(yè)務(wù)需求來(lái)
"build:dev": "cross-env REACT_APP_SECRET_API=development node scripts/build.js",
"build:test": "cross-env REACT_APP_SECRET_API=test node scripts/build.js",
"build:pro": "cross-env REACT_APP_SECRET_API=production node scripts/build.js",
},
然后我們?cè)趫?zhí)行 npm run build:dev 的時(shí)候就可以拿到 REACT_APP_SECRET_API的值為development前面加 cross-env是為了兼容不同平臺(tái) 需要自行安裝 npm install cross-env --save-dev
以上就是create-react-app開(kāi)發(fā)常用配置教程的詳細(xì)內(nèi)容，更多關(guān)于create-react-app開(kāi)發(fā)配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
react是一個(gè)優(yōu)秀的框架,提供了我們很多的便利,但是在使用的過(guò)程中,我們也會(huì)遇到很多的問(wèn)題,其中一個(gè)就是ref的使用,以下是我列出的5個(gè)使用ref的錯(cuò)誤用法,并提供了正確的用法,需要的朋友可以參考下2024-12-12
react-router 路由切換動(dòng)畫(huà)的實(shí)現(xiàn)示例
這篇文章主要介紹了react-router 路由切換動(dòng)畫(huà)的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
這篇文章主要介紹了React?SSR?之限流,React SSR 畢竟涉及到了服務(wù)端，有很多服務(wù)端特有的問(wèn)題需要考慮，而限流就是其中之一，本文會(huì)通過(guò)一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)明，為什么服務(wù)端需要進(jìn)行限流，需要的朋友可以參考下2022-07-07
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個(gè)函數(shù)的組合2022-12-12
React中傳參方式有很多,通過(guò)路由傳參的方式也是必不可少的一種,本文主要介紹了React路由傳參的幾種實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家介紹了React新文檔濫用Ref出現(xiàn)的問(wèn)題詳解，以及如何正確的使用Ref，有需要的朋友可以借鑒參考下，希望能夠有所幫助2022-07-07
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫(xiě)的redux代碼，融入到react當(dāng)中去，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
react實(shí)現(xiàn)阻止父容器滾動(dòng)
這篇文章主要介紹了react實(shí)現(xiàn)阻止父容器滾動(dòng)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React中函數(shù)式組件的基本意義是,組件實(shí)際上是一個(gè)函數(shù),不是類(lèi),下面就來(lái)給大家介紹一下關(guān)于React中函數(shù)組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
ReactNative實(shí)現(xiàn)弧形拖動(dòng)條的代碼案例
本文介紹了ReactNative實(shí)現(xiàn)弧形拖動(dòng)條,本組件使用到了react-native-svg和PanResponder,結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02