Question

我想将TypeScript项目发布到NPM。我正在使用TypeScript编译器（tsc）来编译项目的 .ts 文件，以输出 .js 文件。

因此，要生成输出文件，我正在使用简单的tsc命令。

我的 tsconfig.json ：

{
  "compilerOptions": {
    "outDir": "dist",
    "declaration": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5"
  }
}

发布后，我可以通过以下方式安装软件包：

npm install mypackagename

并在打字稿中使用以下方式：

import MyLib from 'mypackagename'

有效！但是我想提供两种安装方式：通过npm / import（如上例）和通过CDN：

<script src="//unpkg.com/mypackagename"></script>

有可能吗？也许我需要使用一些捆绑软件来代替TypeScript编译器？

现在这是不可能的，因为我无法在浏览器中直接使用commonjs代码。

Answer 1

我最终使用了Webpack捆绑器，其配置为：output.library和output.libraryTarget作为UMD。

libraryTarget: 'umd'-这将在所有模块定义下公开您的库，使其可以与CommonJS，AMD一起使用并作为全局变量使用。看看UMD Repository了解更多信息。

因此，我的webpack.config.js是：

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-output-file.js',
    library: 'MyLib',
    libraryTarget: 'umd',
    libraryExport: 'default',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

...和tsconfig.json是：

{
  "compilerOptions": {
    "outDir": "dist",
    "moduleResolution": "node",
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

为此，我的软件包可以通过import安装在ES6 / TypeScript中：

import MyLib from 'my-lib'

...或通过unpkg CDN：

<script src="//unpkg.com/my-lib@1.0.0"></script>
<script>
    var inst = new MyLib()
</script>

我的项目的源代码：https://github.com/cichy380/simple-custom-event

通过两种安装方式将TypeScript程序包发布到NPM（导入和CDN）

1 个答案: