TA貢獻1828條經(jīng)驗 獲得超6個贊
無需運行npm run eject
步驟1
npm install react-app-rewired --save-dev
第2步
添加config-overrides.js到項目根目錄。（不是./src）
// config-overrides.js
module.exports = function override(config, env) {
// New config, e.g. config.plugins.push...
return config
}
步驟 3
“翻轉”npm 腳本中對 react-scripts 的現(xiàn)有調用以進行啟動、構建和測試
/* 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步
重新啟動您的應用程序。完畢
TA貢獻1827條經(jīng)驗 獲得超9個贊
如果您剛剛使用 CRA 創(chuàng)建了您的應用程序，并且沒有對其進行重大更改，您可以使用npm run eject- 更多信息請點擊此處
請記住，執(zhí)行此操作后將無法回頭（當然，提交除外）。這基本上會為您提供 webpack 文件和其他當前“隱藏”在 CRA 中的文件
對這里的這種方法的一些批評和重新思考
這可能是您的正確選擇。這允許你擴展你當前的 webpack 而不會彈出，或者在你的項目中隨意搞亂/做太多的改變npm run eject?？纯?a >這里的包裹
Egghead.io 的一個很棒的教程react-app-rewired 在這里使用
TA貢獻1860條經(jīng)驗 獲得超9個贊
我通過在 yarn install 和 yarn build 之間運行腳本解決了這個問題。yarn install 后生成了 webpack.config.json 文件，然后立即在 Node 上運行一個修改它的腳本，然后運行構建。
我的代碼：
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貢獻1796條經(jīng)驗 獲得超10個贊
https://www.npmjs.com/package/react-app-rewired
完整的答案是：
如何重新布線你的create-react-app項目
使用創(chuàng)建您的應用程序create-react-app，然后重新連接它。
react-app-rewired 使用create-react-app 2.xWebpack 4安裝：
npm install react-app-rewired --save-dev
對于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)建一個文件
/* 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
}
“翻轉”npm 腳本中對 react-scripts 的現(xiàn)有調用以進行啟動、構建和測試
從：
/* 包.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"
}
注意：不要翻轉彈出腳本的調用。這只會為一個項目運行一次，之后您就可以完全控制 webpack 配置，從而不再需要 react-app-rewired。沒有配置選項可以重新連接彈出腳本。
啟動開發(fā)服務器
npm start
構建您的應用
npm run build
舉報