在 node 模块文件夹中编辑 react npm 模块的代码

Posted 2023-02-22

【中文标题】在 node 模块文件夹中编辑 react npm 模块的代码

【英文标题】：Editing code of react npm modules in node module folder

【发布时间】：2018-12-26 13:37:43

【问题描述】：

是否可以在 modules 文件夹中更改 npm 模块的代码？我认为这不是推荐的做法，还有其他方法可以实现吗？目前，我尝试更改模块目录中的代码，但更改似乎并不适用。提前致谢。

【问题讨论】：

不建议这样做，因为您的更改将在您重新安装模块时消失，并且您无法与他人共享您的更改。考虑例如在 GitHub 上 fork 项目并在那里进行更改，然后将其用作包。

如果您认为这是一个错误或其他人也可以使用的功能，您也可以考虑向模块本身提出拉取请求并分享您的贡献

感谢您的回复。我是这么认为的。奇怪的是，即使我更改了我想测试的东西，它似乎也生效了，好像它使用的是 dist 文件夹中的版本。如果我要分叉到我的 repo 并且仍然想在我的主项目中测试它，我该怎么做？

这取决于项目，但在导入模块时将使用的主文件在package.json 中作为main 字段列出，例如"main": "dist/somefile.js"

请问您的用例是什么？如果您只是想试验一下，您可以将node_modules 中包的main 字段更改为源代码而不是构建文件。

【参考方案1】：

就我而言，我无法接受上述所有方法，因为我需要进行一些小改动。 所以我从 node_module 文件夹中导入了一些必要的类，并在我的源代码树中覆盖了它们。

假设我们需要从已安装的 node_module: 计算机中更改“计算机”类。

import

    RAM,
    Display,
    HardDisk
 from "computer"

class Computer
    constructor() 
        this._ram = new RAM();
        this._display = new Display();
        this._hardDisk = new HardDisk();
    

    ...

然后你可以像这样改变，例如在你的源代码树中。

import

    RAM,
    Display,
    HardDisk
 from "computer"

// assume you made additional classes, Keyboard, Mouse 
import KeyBoard, Mouse from "./mysourceTree"

class Computer
    constructor() 
        this._ram = new RAM();
        this._firstDisplay = new Display();
        this._hardDisk = new HardDisk();
        
        
        this._keyBoard = new Keyboard();
        this._mouse = new Mouse();
    

    ...

【参考方案2】：

您也可以使用补丁。

在 React Native 世界中，这非常可靠 - 所以我猜想它也适用于 React 世界和许多其他依赖 npm 的世界。

补丁包

是一个与 npm 和 yarn 一起工作的库（注意：对于 yarn，请参阅它们的安装说明）。 您可以为本地文件夹、node_modules 中的库（也可以嵌套）制作补丁，或仅针对开发依赖项应用补丁（忽略生产版本中的补丁）。

链接就在这里：https://www.npmjs.com/package/patch-package

1.打补丁

首先对 node_modules 文件夹中特定包的文件进行更改，然后运行

npm patch-package package-name-where-you-made-changes
// or
// yarn patch-package package-name-where-you-made-changes 

如果您尝试修补 嵌套包，例如node_modules/package/node_modules/another-package 你可以在包名之间放一个/：

npx patch-package package/another-package

它也适用于范围包。

npx patch-package @my/package/@my/other-package

2.'/patches'文件夹

如果这是您第一次使用补丁包，它将在您应用的 根目录 中创建一个名为 patches 的文件夹。里面会有一个名为 package-name+0.44.0.patch 之类的文件，它是普通旧包名和您的固定版本之间的 Git diff。

3.与团队共享补丁

简单地说，将“补丁”文件夹中的文件（补丁）提交到 repo。

当其他团队成员（或 CI 服务）运行 npm install 时，补丁会自动执行（在后台使用 npm 安装后脚本） - 如果你想要自定义这种行为（例如排除一些补丁等）。

4.提示：

如果软件包托管在 Github 上（并且您已登录），您可以运行相同的 patch-package 命令 --create-issue 参数，因此它会自动创建一个拉取请求，其中包含主存储库中应用的补丁（因此维护者可以修复问题）：

npm patch-package package-name-where-you-made-changes --create-issue
// or
// yarn patch-package package-name-where-you-made-changes

5.提示：

要恢复补丁，请使用 --reverse 参数运行它：

npm patch-package package-name-where-you-made-changes --reverse

【参考方案3】：

对我来说，最好的方法是，就像@Kevin Raoofi 所说，克隆包并发布我自己的，然后将我的下载到一个特定文件夹中，那里只有“myNpmPackages”。

然后：

在您的项目中，安装您的克隆 在您的 json 中输入“*”，以便始终更新 pkj 编辑包（在“myNpmPackages”文件夹中） 更改版本号 npm 发布 在您的项目中，npm install

【参考方案4】：

当然，您可以更改 node_modules 中的包的内容，因为它是一种标准化格式。但是，您不应该这样做，因为您应该提交更改并重新分发它们。

不幸的是，这个问题的解决方案并不简单，这是我过去一直在努力解决的问题。

npm 链接

第一种方法是在本地克隆 repo 并使用npm link 在您的项目中使用它。

npm link ../path/to/my/proj

这种方法的缺点是您仍然必须手动下载存储库才能使用它，并且npm link 使您的链接版本 包可以在您的系统上全局使用，这可能会产生意想不到的副作用.话虽如此，npm link 可能是最好的方法，如果您想在本地测试对包的更改并将它们贡献给上游。

使用分叉的 git 存储库

您也可以通过执行以下操作直接从分叉的 git 存储库安装它：

npm install --save $GIT_REPO_URL

但是使用这种方法，您需要拥有访问 git 存储库的凭据，因此在处理私有存储库等时会出现额外的复杂性，尤其是在处理 CI 环境时。此外，您应该包含一个提交，以便您可以获得可重复的构建 - 但是，在不使用 npm 链接的情况下开发它有点痛苦。 You can consult the npm documentation for other install options or for more specifics。 如果您不必担心这些事情，这是一个非常好的方法。

本地 npm 模块

完成更改后，您还可以将分叉版本安装到您​​的项目中，如下所示：

npm install --save ../path/to/my/proj

但是，那么，您实际上可以让其他 NPM 项目成为您项目的一部分，其中包含 git 子模块、git 子树或使用 monorepo 之类的东西。对于团队来说，这可能是一个很好的方法，但对于您正在尝试做的事情可能有点过头了，而且您需要考虑很多工具才能使其成为一个好方法。

发布你自己的 npm 模块

不幸的是，所有先前的方法都假设包没有构建过程，或者它们是使用npm's postinstall scripts 之类的东西自动构建的。但是，一些 npm 模块是通过发布特定的构建目录来编写的，这使得 npm 上的内容与源代码有很大不同。

在这些情况下，您需要将构建发布到 npm 可以安装的位置。这包括诸如公共 scoped package、私有 npm 存储库或将您的 npm 模块发布到个人工件服务器之类的东西。

【讨论】：

我可以在 expo 项目中更改节点模块文件吗？

【参考方案5】：

不建议直接修改node_modules中的包，因为你的修改会在你重新安装包的时候消失，并且你不能和其他人分享你的修改。考虑例如在 GitHub 上 fork 项目并在那里进行更改，然后将其用作包。

如果您只是想尝试一下，它仍然可以修改 node_modules 中的包。如果包的package.json 的main 字段指向构建文件，则您可能需要将此字段更改为源条目文件，或者在每次更改源后自行构建文件。