javascript - 如何将用 typescript 消耗品编写的组件发布为全局、commonjs 或 typescript 模块

Question

我用 typescript 写了一个简单的组件，它依赖于 d3。我想在 npm 上发布这个组件，让它可以用作全局、commonjs 模块或 typescript 模块。该组件看起来像这样:

/// <reference types="d3" />
class MyAwesomeComponent {
  data(data: IMyDataFormat) {
    // set data, etc.
  }
  render() {
    // do stuff with d3
  }
}
interface IMyDataFormat {
  // keys/types
}

我的 tsconfig.json 文件目前看起来是这样的:

{
  "compilerOptions": {
    "module": "none",
    "target": "es5",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "declaration": true,
    "outFile": "./dist/index.js",
    "sourceMap": true
  },
  "include": [
    "./src/**/*.ts"
  ]
}

当我使用此配置运行 tsc 时，我得到一个在全局上下文中工作的文件，因此这对消费者有效:

<script src="./d3.js"></script>
<script src="./my-awesome-component.js"></script>
<script>
  var chart = new MyAwesomeComponent();
  chart.data([/* ... */]);
  chart.render();
</script>

我如何设置我的项目(例如，使用备用 tsconfig 文件或对源文件进行小的更改等)，以便它可以在 commonJS 环境(即 webpack 或 browserify)以及 typescript 项目环境中使用？

这是我期望在 commonJS 环境中工作的内容:

const MyAwesomeComponent = require('my-awesome-component');
// this would also be fine:
const MyAwesomeComponent = require('my-awesome-component').MyAwesomeComponent;

这是我期望在 TypeScript 环境中工作的内容:

import {MyAwesomeComponent, IMyDataFormat} from 'my-awesome-component';

谢谢!

Answer 1

我已经向 npmjs.org 发布了一个样板示例。

• 包名为 stackoverflow-47210046 .
• 我还使用 source 创建了一个 GitHub 存储库.
• 包含一些步骤的主要文档在那里可用，但这里也有一些注释:
  • 确保您已将 “dom” 添加到 tsconfig.json 中的库，以便在编译期间包含它们。 (这通常不是必需的，但问题是关于在样板 TS 包中使用 d3。)
  • 将 "main": "lib/index" 添加到 package.json。可以看到，它指向编译后的输出，没有文件扩展名。
  • 将 "typings": "lib/index" 添加到 package.json。
  • 虽然 lib 输出文件夹未添加到版本控制中，但可以在 npmjs.org 上使用。
  • 测试将使用 ts-node 执行，因此可以省略 tsc 编译。
  • 如果您想在监视模式下运行测试，请执行 npm run test -- -w。
  • 如果您想在监视模式下运行您的tsc 编译器，请执行npm run build -- -w。

我希望这对您有所帮助，如果您有任何问题，请在此处发布，或在 GitHub 上提交新问题。

干杯。