Публикация пакета TypeScript в NPM с двумя типами установки (импорт и CDN)

Question

Я хочу опубликовать проект TypeScript в NPM . Я использую TypeScript Compiler (tsc) для передачи .ts файлов проекта для вывода .js файла (ов).

Таким образом, для генерации выходных файлов я использую простую команду tsc.

My 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 Compiler?

Теперь это невозможно, потому что я не могу использовать код 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