Question

我在typescript中编写了一个简单的组件，它依赖于d3。我想在npm上发布这个组件，并将其用作全局，commonjs模块或打字稿模块。该组件看起来像这样：

/// <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）以及打字稿项目环境中使用？

以下是我期望为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上提交新问题。

干杯。

如何将使用typescript编写的组件作为global，commonjs或typescript模块发布

1 个答案: