如何让 npm 从 GitHub url 安装 typescript 依赖项？

Posted 2023-03-06

【中文标题】如何让 npm 从 GitHub url 安装 typescript 依赖项？

【英文标题】：How to have npm install a typescript dependency from a GitHub url?

【发布时间】：2018-12-07 07:19:35

【问题描述】：

考虑以下场景：

有一个代码库。该库是用 TypeScript 编写的，并且 typescript 代码发布在 GitHub 上。 package.json 文件有一个构建脚本，它基于 TypeScript 代码创建 javascript 文件和一个发布脚本，然后将生成的 JS 文件放在 npm 上。 我创建了 GitHub 存储库的一个分支，对 typescript 文件进行了一些修改，并将这些更改推送到 GitHub。 （我也打开了原始 GitHub 存储库的 PR，但在合并这些更改之前存在时间延迟。） 我希望在下游 NPM 包中使用这些代码更改，因此在下游包中我将修改后的包的引用（在下游的 package.json 文件中）更改为我 fork 的 GitHub URL 并执行 npm install .

这不起作用，因为：

修改包的package.json文件没有列出dist字段中的typescript文件，只列出了自动生成的js文件，所以npm install时不会拉取TypeScript文件。 编译的 JS 文件不存在，因为它们没有签入到 GitHub。

我该如何解决这个问题？有没有办法我可以修改npm install 的行为，以便它获取repo 中不在dist 中的文件，然后在安装期间运行构建脚本？

【问题讨论】：

我只能考虑维护一个单独的build 分支（与文件夹同名的分支有时会混淆Git，所以避免dist）。

【参考方案1】：

我遇到了同样的问题。看到很多关于 monorepos 的文章（下面的链接），但没有太多关于如何将 TypeScript 项目拆分为单独的存储库的文章。

简而言之，你需要一步一步构建JS文件。

有关工作代码示例，请参阅 https://github.com/stared/yarn-adding-pure-typescript-package-example。

所以，有几个解决方案。假设存储库是someuser/package-to-import

安装后

使用yarn，您可以直接从 GitHub 存储库获取项目：

yarn add someuser/package-to-import#master

（或与npm install someuser/package-to-import#master相同）

如果您在此存储库的一个分支上工作，您可以通过在 package-to-import 回购这部分添加到 package.json 来让您的生活更轻松：

  "scripts": 
    ...,
    "postinstall": "tsc --outDir ./build"
  

现在它只适用于yarn add/upgrade，没有额外的脚本。 或者，您可以半手动完成，即在您的主存储库中创建一个脚本package.json

  "scripts": 
    ...,
    "upgrade-package-to-import": "yarn upgrade package-to-import && cd node_modules/package-to-import && yarn build"
  

链接

有一种不同的方法可以将存储库克隆到不同的文件夹、构建文件并链接它。

git clone [e-mail]:someuser/package-to-import.git
cd package-to-import
npm run build  # or any other instruction to build
npm link

如果你使用纱线，最后两行将是：

yarn build
yarn link

然后，进入你项目所在的文件夹，写入

npm link package-to-import

或者在纱线的情况下

yarn link package-to-import

这些是符号链接，因此当您从 repo 中提取并构建文件时，您将使用更新的版本。

另见：

npm link和yarn link官方文档 The magic behind npm link

Monorepos

完全不同的方法。 对于使用 git 子模块的混合建议：

4 Ways to Go Monorepo in 2019 4 Git Submodules Alternatives You Should Know A (multi-) monorepo setup with Git Submodules

【讨论】：

所以我在模块中的后安装是"postinstall": "tsc -d -p ."。如果我现在在使用该模块的项目中运行npx tsc，它会尝试编译模块中的 ts 文件。

我认为它会尝试导入 .ts 文件而不是定义。

***.com/questions/67346535/… 发帖以防有人关心

【参考方案2】：

prepack 脚本的 docs 表明它是在从 git 存储库安装依赖项后运行的。尝试在 git 依赖项的 package.json 中添加这样的内容：

  "scripts": 
    "prepack": "call the build script"
  

这应该在你 npm install 之后构建包，这听起来像你想要做的。我不确定您是否还有其他问题。

【讨论】：

看起来prepare 也有效。 -- docs.npmjs.com/misc/scripts

【参考方案3】：

在你的 fork 中构建文件并将它们提交到你的 fork 的 repo/branch。

我遇到了与您完全相同的问题。真是令人惊讶，我能够通过 Google 搜索到您的 *** 问题，因为这是一个很难描述的问题。

简而言之，我不得不 fork react-native-webview 库以更新 kotlinVersion 以支持 Gradle 插件 6.0.0。

我对它进行了很好的分叉，并且很好地碰撞了那个版本，如您所见here。

然后我将这个特定的 fork 和分支添加到我的 package.json 文件中：

"react-native-webview": "github:cntral/react-native-webview#5_8_2"

在此之后我会做npm install 并会得到error Command "tsc" not found.

经过大量挖掘，这个库的 package.json 中有一个 "prepack": "yarn build" 脚本，只要它作为 git 依赖项包含在内，它就会尝试运行。但是我们没有使用 TypeScript，所以它会尝试运行 yarn build，而 yarn tsc 和 tsc 却找不到。

好的，所以我尝试将typescript 作为devDependency 添加到我的package.json 以查看是否可以解决问题。它没有。我尝试使用yarn install 而不是npm install 来查看是否可以解决它。它会很好地安装它，但是如果您查看node_modules/react-native-webview 目录，则应该在lib/ 中的转换后的JavaScript 文件不存在。所以这没有用。

然后我想，如果这一切都是试图将 TypeScript 文件转换成普通的 JavaScript 以便我们的应用程序可以使用它，为什么不在我们的 fork 中这样做并提交那些 .js 文件。所以我做了。

我在 react-native-webview 的 fork 中运行了 yarn build，从 .gitignore 中删除了 lib/ 目录，然后提交了这些更改，如您所见 here。

然后我还必须从 fork 的 package.json 中删除 "prepack": "yarn build"，这样它就不会尝试构建库并再次运行 tsc，这已完成 here。

之后我们的应用就可以正常使用它了，就像我们从 npm 或 GitHub 使用的任何其他库一样。

希望对其他人有所帮助。

【讨论】：

这样的问题是，如果你想请求你对源的更改，他们可能不想要构建的文件或你所做的更改。

@meelash 是的，你可能是对的。那你有什么建议？安装后？

我最终做了同样的事情来运行一个叉子。如果有办法避免将 dist 文件推送到我的自定义 fork，我很乐意接受。尽管在应该在哪里以及如何做方面没有任何好的资源。显然，有一个prepare 步骤，但我无法让我的构建命令从那里工作。

@k0pernikus 这也是我的经验。决定在一段时间后继续前进，然后回到实际工作中。 :)

我开了一个后续问题，看看情况如何***.com/q/68925785/457268