javascript - 为什么对节点模块所做的更改不适用于 React.js 应用程序?

标签 javascript reactjs npm leaflet google-chrome-devtools

我安装了节点模块

npm install

之后我更改了其中一个模块中的几行。红色矩形中的线是已进行更改的位置。

enter image description here

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

然后启动我的 react 应用程序:

npm run start

打开 Chrome 的 DevTools,我希望在修改后的文件中看到这些更改,但该文件并未受到任何更改的影响。我的意思是该文件看起来与最初的样子相同。

enter image description here

我清除了所有浏览器的缓存,删除了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

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

最佳答案

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

npm install

npm run rollup

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

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

关于javascript - 为什么对节点模块所做的更改不适用于 React.js 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59401005/

相关文章:

git - 如何使用NPM 安装特定的Git 分支?

javascript - 打开时弹出窗口不显示

javascript - 复制到剪贴板包括目标元素的父元素

reactjs - React Router 4 params prop 上的 PropTypes isRequired

javascript - 从现有数组创建一个新数组

node.js - 如何在 Dockerfile.template 中的 `tsc` 之前运行 TypeScript `COPY`?

javascript - esm 不解析模块别名

javascript - 对另一个数组中的对象键数组进行排序

javascript - 并排溢出 2 个文本容器的样式

javascript - 接受 POST 请求的 Node.js 服务器