Question

我正在尝试在NPM上发布一个打字稿库，但我不能在发布后有一条“好”的道路。

我在这一点上遵循了几个指南，但我找不到解决方案。

问题：所以，请考虑以下结构：

dist
 |- Alls files generated after tsc build
lib
 |- All TS files of library (source)
CHANGELOG.md
LICENSE
package.json
README.md
tsconfig.json

在发布之后，例如在Angular应用程序中，我将输入：

import {Component} from '<library name>/dist/Component';

我的问题：如何配置项目导入以取代from '<library name>/Component'而不是from '<library name>/dist/Component'？

谢谢

Answer 1

绝大多数模块捆绑工具都遵循Node's module resolution rules，有效地说，如果您在库名称后指定路径，它将解析相对于模块的node_modules文件夹的路径。您无法覆盖此内容，出于向后兼容性原因，它是almost certainly never going to change。

不要求您的用户配置他们的模块捆绑包，唯一可以实现的方法是发布您的包，其目录结构与您希望向用户公开的目录结构相匹配。您可以使用脚本/ NPM挂钩（例如prepublish和postpublish）来自动执行此操作。

Answer 2

关于@ joe-clay的建议，我找到了解决方案。

我的新结构如下：

{NP}包含页面上的dist目录在NPM上发布，包含README.md和LICENSE文件。

根目录是Github上的入口点，带有README.md，LICENSE和CHANGELOG.md，用于Github上的开发过程。

tsconfig.json放在root上，因为如果位于dist目录中，我找不到正确构建的解决方案。

在package.json中，我添加了脚本"build": "cd ../ && tsc"，以便能够在npm run build目录中执行dist。

通过这种结构，图书馆开发和NPM出版工作正常。

我可以从我的应用程序中使用此导入：

import {Component} from '<library name>/Component';

再次感谢你。

Answer 3

我找到了一个非常干净的解决方案，不需要将package.json复制到dist或从dist发布。

您可以将项目的结构设置为：

package.json (for entire project)
src
 | secondary-package-name
   |- index.ts
secondary-package-name
 |- package.json (for secondary-module-name)
dist
 |- generated files

您的辅助模块的package.json只需要包含

{
  "name": "package/secondary-package-name",
  "private": true,
  "main": "../dist/secondary-package-name/index.js"
}

指向您的dist

然后，您应该能够像这样从辅助包中引用导出：

import { someFn } from "package/secondary-package-name"

只要它是从该目录中的index.ts文件导出的

您还需要确保主package.json的files字段包括：

"files": [
    "dist",
    "secondary-package-name"
  ],

Answer 4

这可能与你想要的有点不同，但我认为这是更标准的方法。不要尝试从模块中的不同目录导入，只需使用单个main.ts文件来收集所有内容以便导出。假设你的lib目录中有这个main.ts文件重新导出所有内容，你可以配置package.json指向生成的JS。

文件夹结构：

dist
 |- main.js
 |- main.d.ts
 |- all other generates files
lib
 |- main.ts
...

的package.json：

{
    ...
    "main": "./dist/main.js",
    "types": "./dist/main.d.ts",
    ...
}

在此示例中，如果main.ts中包含以下内容：

export const testValue = 5;

您可以使用import { testValue } from '<library>';

将其导入依赖于此库的其他代码中

查看typescript docs了解更多相关信息。

Answer 5

我刚刚发现了这个问题。 2018 年确实很遥远，但从那时起工具已经进化。我一直在寻找相同的干净结构，为此我有一个建议的解决方案作为 SO 问题（积极寻找批评/反馈）

Creating a usable library on npm... with yarn workspaces

基本上这个想法与@clem 和@wilcoxmd 的答案非常相似，但支持纱线工作区以实现“上层”的自动化。

如何在导入时没有“dist”的NPM上发布TypeScript模块？

5 个答案: