为什么对节点模块所做的更改不适用于 React.js 应用程序？答案

【问题标题】：Why changes made to a node module does not apply to React.js app?为什么对节点模块所做的更改不适用于 React.js 应用程序？
【发布时间】：2020-04-11 12:52:13
【问题描述】：

我用

安装了节点模块

npm install

之后，我在其中一个模块中更改了几行。红色矩形中的线条是进行更改的地方。

请注意，find 命令行工具仅检测到一个具有该名称的文件。

然后启动我的 react 应用：

npm run start

打开 Chrome 的 DevTools 我希望在修改后的文件中看到这些更改，但文件并未受到任何更改的影响。我的意思是这个文件看起来和它最初的样子一样。

我清除了所有浏览器的缓存，删除了 node_modules/.cache

rm -fr node_modules/.cache

我重新启动了浏览器，甚至我的电脑。我尝试更改源的库的名称是leaflet。我已经安装了另一个依赖于该库的模块。我的 PC 上没有 leaflet 的全局 npm 安装：

>:~/Coding/test/react-leaflet-marker$ npm list -g --depth=0
/home/cloud-of-sounds/.nvm/versions/node/v10.13.0/lib
├── @storybook/cli@5.2.6
├── cordova@8.1.1
├── http-server@0.11.1
├── json-minify@1.0.0
├── minify@4.1.3
├── npm@6.4.1
├── phonegap@8.2.2
└── plugman@3.0.1

我无法解决这个问题。你能帮我如何让我的浏览器加载这些更改吗？

【问题讨论】：

您的npm run start 是否也重建了应用程序？
我不确定。如何检查？这就是我的package.json: "scripts": { "start": "react-scripts start" }
不确定当你运行 start 时 react-scripts 是否会重建。你可以更改节点模块文件，然后运行react-scripts build，然后运行react-scripts start然后看看它是否更新
您没有更改正确的文件（leaflet/dist/leaflet-src.js 与 leaflet/src/layer/marker/Icon.Default.js），并且由于源映射而被愚弄了哪些文件正在加载。传单不会在您期望的时候重建。
谢谢你，@IvanSanchez！从 github 克隆 leaflet 项目后，我在 leaflet/src/layer/marker/Icon.Default.js 中再次进行了这些更改。接下来我运行npm install 和npm run rollup，瞧！ Chrome 调试器现在可以正确显示代码的修改。

标签： javascript reactjs npm leaflet google-chrome-devtools

【解决方案1】：

谢谢你，@IvanSanchez！我将node_modules 中的文件夹替换为我从github 克隆的最新leaflet。我再次在leaflet/src/layer/marker/Icon.Default.js 中进行了这些更改。接下来我运行

npm install

和

npm run rollup

瞧！ Chrome 调试器现在可以正确显示代码的修改。

结论：在 npm 包中，src/ 文件夹包含开发阶段代码，而不是包含生产阶段代码的 dist/！看起来运行npm run rollup 会在src/ 中构建代码并在dist/ 中输出。

【讨论】：

看起来 rollup 不是标准的 npm 脚本，你能确认它来自哪个包吗？
这个脚本特别是 leaflet 节点模块的一部分。检查内部 leaflet package.json: file "scripts": { ... "rollup": "rollup -c build/rollup-config.js", ... }