TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊
無需運(yùn)行npm run eject
步驟1
npm install react-app-rewired --save-dev
第2步
添加config-overrides.js到項(xiàng)目根目錄。（不是./src）
// config-overrides.js
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
return config
}
步驟 3
“翻轉(zhuǎn)”npm 腳本中對(duì) react-scripts 的現(xiàn)有調(diào)用以進(jìn)行啟動(dòng)、構(gòu)建和測(cè)試
/* 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",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
第4步
重新啟動(dòng)您的應(yīng)用程序。完畢
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊
如果您剛剛使用 CRA 創(chuàng)建了您的應(yīng)用程序，并且沒有對(duì)其進(jìn)行重大更改，您可以使用npm run eject- 更多信息請(qǐng)點(diǎn)擊此處
請(qǐng)記住，執(zhí)行此操作后將無法回頭（當(dāng)然，提交除外）。這基本上會(huì)為您提供 webpack 文件和其他當(dāng)前“隱藏”在 CRA 中的文件
對(duì)這里的這種方法的一些批評(píng)和重新思考
這可能是您的正確選擇。這允許你擴(kuò)展你當(dāng)前的 webpack 而不會(huì)彈出，或者在你的項(xiàng)目中隨意搞亂/做太多的改變npm run eject。看看這里的包裹
Egghead.io 的一個(gè)很棒的教程react-app-rewired 在這里使用
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
我通過在 yarn install 和 yarn build 之間運(yùn)行腳本解決了這個(gè)問題。yarn install 后生成了 webpack.config.json 文件，然后立即在 Node 上運(yùn)行一個(gè)修改它的腳本，然后運(yùn)行構(gòu)建。
我的代碼：
custom.webpack.config.js
const fs = require('fs')
// WebPack.config File
const fileConfig = 'node_modules/react-scripts/config/webpack.config.js'
new Promise((resolve) => {
fs.readFile(fileConfig, 'utf8', function (err, data) {
if (err) {
return console.log(err)
}
resolve(data)
})
}).then((file) => {
let CodeAsString = "Code as String to save"
let regexCode = /YourCodeRegex}/g
let result = file.replace(regexCode, CodeAsString)
fs.writeFile(fileConfig, result, function (err) {
if (err) return console.log(err)
console.log('The webpack.config file was modifed!')
})
})
那么，現(xiàn)在您是否需要編輯 package.json 以在流程中包含此代碼：
"scripts": {
"prestart": "node custom.webpack.config.js",
"prebuild": "node custom.webpack.config.js",
"start": "react-scripts start",
"build": "react-scripts build"
}
完畢！:)
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊
https://www.npmjs.com/package/react-app-rewired
完整的答案是：
如何重新布線你的create-react-app項(xiàng)目
使用創(chuàng)建您的應(yīng)用程序create-react-app，然后重新連接它。
react-app-rewired 使用create-react-app 2.xWebpack 4安裝：
npm install react-app-rewired --save-dev
對(duì)于create-react-app 1.x或react-scripts-ts使用 Webpack 3：
npm install react-app-rewired@1.6.2 --save-dev
config-overrides.js在根目錄下創(chuàng)建一個(gè)文件
/* config-overrides.js */
module.exports = function override(config, env) {
//do stuff with the webpack config...
return config;
}
像這樣：
+-- your-project
| +-- config-overrides.js
| +-- node_modules
| +-- package.json
| +-- public
| +-- README.md
| +-- src
例如 ：
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
config.module.rules = [...config.module.rules,
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
return config
}
“翻轉(zhuǎn)”npm 腳本中對(duì) react-scripts 的現(xiàn)有調(diào)用以進(jìn)行啟動(dòng)、構(gòu)建和測(cè)試
從：
/* 包.json */
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
到：
/* 包.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
注意：不要翻轉(zhuǎn)彈出腳本的調(diào)用。這只會(huì)為一個(gè)項(xiàng)目運(yùn)行一次，之后您就可以完全控制 webpack 配置，從而不再需要 react-app-rewired。沒有配置選項(xiàng)可以重新連接彈出腳本。
啟動(dòng)開發(fā)服務(wù)器
npm start
構(gòu)建您的應(yīng)用
npm run build
舉報(bào)