Q1. yarn build打包生成的文件直接點擊index.html報錯，打不開圆兵，導(dǎo)致的問題是yarn build打包生成的文件部署到服務(wù)器時只能在服務(wù)器根目錄带欢，如果在其他文件夾里面會報錯
A1:
默認(rèn)情況下仅颇，index.html中引入js和css的方式是<script type="text/javascript" src="/static/js/main.86163e33.js"></script>，需要在本地啟一個服務(wù)器才行抛猖，即在打包文件根目錄下打開命令行，輸入http-server，即可通過localhost:8080來訪問到項目财著。
解決辦法是：
1.將所有引入資源文件的地方路徑改為./联四，eg:<script type="text/javascript" src="./static/js/main.86163e33.js"></script>，即可通過直接點擊index.html來打開項目撑教。
2.打包前在package.json文件里添加一個配置："homepage":"."朝墩，打包之后資源文件路徑前面都會加上一個點
{
"name": "test04",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"homepage":"."
}
這樣直接點開會有一個報錯
registerServiceWorker.js:71 Error during service worker registration: DOMException: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.
原因是serviceWorker不支持//這種協(xié)議，需要放到https或者localhost下才行伟姐。參考網(wǎng)址
- 打包時默認(rèn)執(zhí)行react-script模塊下的一些腳本配置文件收苏，所以直接找到并修改這些文件也是可行的
具體路徑是：項目文件夾\node_modules\react-scripts\config里面的paths.js文件
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
return ensureSlash(servedUrl, true);
}
pathname改成./就可以了。參考網(wǎng)址
- 如果頁面中引用了很多資源文件圖片愤兵、視頻鹿霸、字體等，不可能一個個去自動建立好的文件里去找再修改路徑秆乳，這時就可以在yarn build命令前設(shè)置PUBLIC_URL懦鼠。
windows系統(tǒng)下：
set PUBLIC_URL=./ yarn build
mac、linux系統(tǒng)下：
PUBLIC_URL=./ yarn build
參考網(wǎng)址
Q2. 如何修改create-react-app的配置
A2:
現(xiàn)在 如果你正在搭建react運行環(huán)境屹堰，使用 create-react-app 去自動構(gòu)建你的app程序肛冶。你的項目所在的文件夾下是沒有配置文件。react-scripts 是唯一的 額外的 構(gòu)建依賴在你的package.json中双藕，你的運行環(huán)境將有每一個你需要用來構(gòu)建一個現(xiàn)代React app應(yīng)用程序淑趾。你需要的依賴，和在配置文件中編寫的配置代碼忧陪，react-scripts 都幫你寫了扣泊，比如：react-scripts幫你自動下載需要的 webpack-dev-server 依賴，然后react-scripts自己寫了一個nodejs服務(wù)端的腳本代碼 start.js來 實例化 WebpackDevServer 嘶摊，并且運行啟動了一個使用 express 的Http服務(wù)器延蟹，現(xiàn)在你只需要專心寫src源代碼就可以了。省去了很多精力叶堆，最適合快速上手一個demo了阱飘。
有兩種操作：
- 通過react-app-rewired插件，react-app-rewired的作用就是在不eject的情況下虱颗，覆蓋create-react-app的配置沥匈。如果已經(jīng)eject導(dǎo)出了配置，就沒有必要使用react-app-rewired忘渔。使用插件的方法見官方文檔,插件的相關(guān)介紹見參考網(wǎng)址
這個插件可以在不更改原始配置腳本的前提下更改默認(rèn)配置高帖，加一些plugins, 或者loaders，比如antd按需加載樣式畦粮、less文件識別 散址。
按需加載參考鏈接：
- 引入 react-app-rewired并修改 package.json 里的啟動配置:
$ yarn add react-app-rewired --dev
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
- 然后在項目根目錄創(chuàng)建一個 config-overrides.js 用于修改默認(rèn)配置乖阵。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
- 使用 babel-plugin-import, babel-plugin-import是一個用于按需加載組件代碼和樣式的 babel 插件（原理），現(xiàn)在我們嘗試安裝它并修改 config-overrides.js 文件预麸。
yarn add babel-plugin-import --dev
+ const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
+ config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
return config;
};
- 更改引用方式
- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';
LESS文件處理：
兩種方式：
- 使用react-app-rewire-less插件瞪浸。npm install --save react-app-rewire-less。
然后在項目根目錄下創(chuàng)建 config-overrides.js文件吏祸，添加如下內(nèi)容：
const rewireLess = require('react-app-rewire-less');
/* config-overrides.js */
module.exports = function override(config, env) {
config = rewireLess(config, env);
return config;
}
- 官方的參考鏈接：
First, let’s install the command-line interface for Sass:
npm install --save node-sass-chokidar
Alternatively you may use yarn:
yarn add node-sass-chokidar
Then in package.json, add the following lines to scripts:
"scripts": {
+ "build-css": "node-sass-chokidar src/ -o src/",
+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
- 通過npm run eject來暴露所有的配置文件
轉(zhuǎn)到自定義配置
如果你是重度用戶 并且對默認(rèn)配置不滿意对蒲，你可以從工具中退出，并像樣板生成器一樣使用它犁罩。
運行 npm run eject 復(fù)制所有依賴文件和相應(yīng)依賴 (Webpack齐蔽、Babel、ESLint 等等) 到你的項目床估，因此完全可控含滴。類似 npm start 和 npm run build 的命令依舊會工作， 但他們會指向復(fù)制的腳本丐巫，因此你可以調(diào)整谈况。在這一點上，你只能靠自己递胧。
注: 這是個單向操作碑韵。一旦 eject，你就回不去啦!
你可能不需要使用 eject缎脾。 這個功能集適合中小型部署祝闻，而且你不應(yīng)該感到有義務(wù)使用此功能。但是遗菠，我們明白如果你無法自定義該工具联喘，那么它將不會有用。參考網(wǎng)址
下面介紹如何修改暴露之后的配置文件來解決直接點擊index.html報錯問題
項目文件/config/paths.js修改如下：
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
return ensureSlash(servedUrl, true);
}
pathname值改為./
下面介紹修改修改暴露之后的文件解決antd樣式丟失問題：
項目文件/config/webpack.config.dev.js和項目文件/config/webpack.config.prod.js兩個文件對應(yīng)位置加上
"plugins": [
["import", {"libraryName": "antd-mobile", "style": "css"}],
],
修改之后是這樣：
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
"plugins": [
["import", {"libraryName": "antd-mobile", "style": "css"}],
],
compact: true,
},
},
