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

Question

考虑以下场景：

• 有一个代码库。该库是用 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 中的文件，然后在安装期间运行构建脚本？

Answer 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 git@github.com: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

Answer 2

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

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

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

Answer 3

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

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

简而言之，我不得不 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 使用的任何其他库一样。

希望对其他人有所帮助。