我需要每次修改代码后都运行 "npm run build" 吗？

Question

我需要每次修改代码后都运行 "npm run build" 吗？

30

首先，我对NPM一窍不通。但是，我知道React和PHP。所以，我想利用Babel和React的CDN作为前端，使用PHP作为后端创建CMS系统（当然还需要axios来进行数据请求和发送）。然而，我想更加规范地使用webpack来构建实际的网站。于是，我阅读了这篇文章中的教程，他讲解得非常出色。但是，他在教程中使用HTML，而我的情况下是PHP。因此，由于我并不完全明白自己在做什么，我在webpack.config.js文件中将HTMLWebPlugin重定向到了我的PHP文件。

plugins: [
new HtmlWebPackPlugin({
  template: "./../index.php",
  filename: "./index.php"
})

然而，当我修改代码并刷新时，网页不会自动适应更改，除非我下一次运行"npm run build"。我知道我正在从构建的应用程序中运行它。这是因为在网页渲染输出文件（dist / main.js）时，我更改的是入口文件（index.js）。但是连接这两个文件是否可以？是否有一种方法可以自动适应我在入口文件中所做的更改？

- Kyi Zin

是的，@aamirl先生！请在此处检查链接。这是我的文件夹结构。ReactApp中的东西与我上面提到的文章相同。唯一的区别就是webpack.config.js的“插件”。我没有使用CRA。我只是按照那篇文章，所以可能需要npm install。 - Kyi Zin

我没有麦克风和网络摄像头，因为我正在使用我的电脑。但是感谢您的帮助，先生。 - Kyi Zin

抱歉，我不是神，无法编写数百行代码而没有任何错误。@Goran_Ilic_Ilke - Kyi Zin

4个回答

6

使用此命令：

tsc src/index.ts --watch --outDir ./lib

参考：https://www.youtube.com/watch?v=F6aHIh5NglQ

- J.K.

2

这应该是真正的解决方案。不知何故，npm watch正在使用我电脑上的所有内存，而且它也不支持增量编译。 - Jeffrey Russell

@JeffreyRussell 我曾经遇到过同样的问题，后来发现是因为在监视时没有忽略构建文件夹，watch命令一直处于无限循环状态。我尝试了https://medium.com/this-code/the-easy-way-to-watch-npm-builds-without-reloading-every-damn-time-cd1fd14393cb，但在构建中添加了ignore关键字后就可以正常工作了。 - Faisal Ali

2

如果您正在使用 Vite Laravel 插件，请打开 package.json 安装 watch。

npm install watch

并在脚本中将其更改为

"build": "vite build --watch"

当您进行更改时，它应该自动更新

- Kipruto

0

是的，有一种方法可以解决这个问题。您可以使用webpack的热模块替换功能。只需在开发模式下运行webpack，并使用您应该在webpack官方文档中找到的正确配置集即可。

- Harish Dhami

它并不一定与我的问题相关，因为它仅适用于模块更改，而在我的情况下，这并不是它。 - Kyi Zin

不需要，任何您在代码中更改的内容，构建都会为该更改重新运行。这难道不是您要的吗？ - Harish Dhami

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyi Zin · Accepted Answer

所以最终，我找到了解决方案。当你想要在每次文件更改时重新运行“npm run build”时，你需要通过npm安装watch。它将检查目录中的所有文件，并在你更改某些内容或保存时重新运行package.json中的所有脚本。步骤如下 -

安装 watch
```
npm install watch
```

当 watch 安装完成后，添加

"watch": "watch 'npm run build' ./directory-you-want-to-track"

运行
```
npm run watch
```