create-react-app開發(fā)常用配置教程
引言
注: 如未找到配置文件請使用npm run eject彈出配置文件
當前對應版本react 16.2
設置代理
在開發(fā)中往往是跨域請求的，配置一下請求代理可以解決這個問題
// package.json 文件 "proxy": "http://xxx.xxx",
模塊熱替換(HMR)
默認情況下在每次修改內(nèi)容的時候都會刷新頁面，有時候我們并不想要這樣，比如有一個bug需要重復點擊或者重復操作多次才能實現(xiàn)，但是由于我們每次修改都會刷新頁面，可能會導致這個bug很難被測試或者實現(xiàn)，這個配置在我看來非常有用，當然這不是必須的，但是可以適當?shù)奶岣唛_發(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局部化
- 正常導入css情況下會污染到全局
- 修改 webpack-config-dev.js 及 webpack-config-prod.js 配置
options: {
modules: true,
localIdentName: '__[local]--[hash:base64:5]'
}
注意: 使用 css-module會導致 ant 樣式失效...其次有其他css局部化解決方案 比如 styled-components可參考我另外一篇文章 騷里騷氣的styled-components快速入門
支持裝飾器寫法
比如redux或者mobx可以使用@寫法
安裝 transform-decorators-legacy
npm install --save-dev babel-plugin-transform-decorators-legacy
插件中使用legacy是因為Babel 5支持處理裝飾器，但是它也許會跟最終的標準有區(qū)別，所以才使用legacy這個詞。
// package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
// +++ 加入配置 +++
"transform-decorators-legacy",
// ...ant配置
]
}
請注意， plugins 的屬性非常重要: transform-decorators-legacy 應該放在最前面。 babel 設置有問題？請先查看這個 issue 。
打包后路徑問題導致頁面空白
// package.json 文件增加配置 ... "homepage": ".", ...
注: 如果直接打開index.html后文件正確加載但頁面仍然空白，請檢查你是否使用的是 BrowserRouter (同vue的history模式)需要后端配置支持，否則請使用HashRouter 即帶 #
配置簡化路徑
當頁面嵌套過深時我們會發(fā)現(xiàn)在路徑通常都要這么寫
import xx from './../../../xxx/qqq'通過配置webpack可以寫成import xx from '@/xxx/qqq'
// 修改 webpack.config.dev 與 webpack.config.prod 兩個文件 加入相同配置
...
// +++ 找個開心的地方加入配置
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
// 修改
alias: {
'react-native': 'react-native-web',
// +++ 加入配置
'@': resolve('src')
}
- 優(yōu)點: 如果按照相對路徑的方法引用，每次要計算.. 并且文件一旦遷移 那么又要重新計算，如此配置文件遷移也不需要計算
- 缺點: 在部分編輯器可能會失去文件引用高亮(比如webstrom), 并且不能通過快捷鍵快速查找其引用.
注 : 這屬于webpack的配置，當然在vue-cli中也適用(更新:目前vue-cli已經(jīng)默認支持這種配置)
按需引用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 同時需要配置 less
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}
打包構(gòu)建分析
build之后發(fā)現(xiàn)包體積比較大，用 webpack-bundle-analyzer 分析各個js文件的打包
// webpack.config.prod.js
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...code
// 找到 plugins 記得別加錯地方 很多 new xxx()的才是
plugins: [
new xxx(),
new xxx(),
// +++++
new BundleAnalyzerPlugin(),
]
生產(chǎn)環(huán)境去掉map文件
有時候你會發(fā)現(xiàn)build時間過長，參見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)境變量的設置，參考文檔 但是有時候在一些項目中，我們可能需要根據(jù)不同的環(huán)境變量使用不同的配置，那么我們可以這么做:
如果需要自定義環(huán)境變量 必須以REACT_APP_開頭
// 修改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"
// 這三個是我加的 可以根據(jù)你的業(yè)務需求來
"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",
},
然后我們在執(zhí)行 npm run build:dev 的時候就可以拿到 REACT_APP_SECRET_API的值為development前面加 cross-env是為了兼容不同平臺 需要自行安裝 npm install cross-env --save-dev
以上就是create-react-app開發(fā)常用配置教程的詳細內(nèi)容，更多關(guān)于create-react-app開發(fā)配置的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章主要介紹了React-Native 組件之 Modal的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
react 實現(xiàn)圖片正在加載中 加載完成 加載失敗三個階段的原理解析
這篇文章主要介紹了react 實現(xiàn)圖片正在加載中 加載完成 加載失敗三個階段的,通過使用loading的圖片來占位，具體原理解析及實現(xiàn)代碼跟隨小編一起通過本文學習吧2021-05-05
淺析JS中什么是自定義react數(shù)據(jù)驗證組件
我們在做前端表單提交時，經(jīng)常會遇到要對表單中的數(shù)據(jù)進行校驗的問題。這篇文章主要介紹了js中什么是自定義react數(shù)據(jù)驗證組件,需要的朋友可以參考下2018-10-10
這篇文章主要為大家介紹了useCallback和useMemo的正確用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了React forwardRef用法,forwardRef允許你的組件使用ref將一個DOM節(jié)點暴露給父組件，本文結(jié)合案例分析給大家講解的非常詳細，需要的朋友可以參考下2023-06-06
本文給大家介紹了React實現(xiàn)翻頁時鐘的代碼示例,翻頁時鐘把數(shù)字分為上下兩部分,翻頁效果的實現(xiàn)需要通過設置 position 把所有的數(shù)組放在同一個位置疊加起來,文中有詳細的代碼講解,需要的朋友可以參考下2023-08-08
React中使用react-player 播放視頻或直播的方法
這篇文章主要介紹了React中使用react-player 播放視頻或直播，本文教大家如何使用react框架及創(chuàng)建實例的代碼,本文內(nèi)容簡短給大家介紹的非常詳細，需要的朋友可以參考下2022-01-01
React利用插件和不用插件實現(xiàn)雙向綁定的方法詳解
我們知道在 angular 中數(shù)據(jù)時雙向綁定的；而在 react 中，數(shù)據(jù)是向一個方向傳遞：從擁有者到子節(jié)點。也就是我們說的單向數(shù)據(jù)綁定。那如何實現(xiàn)雙向綁定呢？下面這篇文章主要給大家介紹了關(guān)于React利用插件和不用插件實現(xiàn)雙向綁定的方法，需要的朋友可以參考下。2017-07-07
Ant?Design主要用于中后臺系統(tǒng)的使用,它提供了豐富的組件和工具,可以幫助開發(fā)人員快速構(gòu)建出美觀、易用的界面,同時,Ant?Design還提供了詳細的文檔和示例,方便開發(fā)者學習和使用,這篇文章主要介紹了React使用UI（Ant?Design）框架,需要的朋友可以參考下2023-12-12
在當今的前端開發(fā)中,處理文件流操作已經(jīng)成為一個常見的需求,無論是上傳、下載、讀取、展示還是其他的文件處理操作,都需要高效且可靠地處理二進制數(shù)據(jù),本文將深入探討如何使用 React 實現(xiàn)文件分片上傳和下載,并介紹相關(guān)的基本概念和技術(shù),需要的朋友可以參考下2023-08-08