Typescriptで作成された既存のプロジェクトにWebpackを追加して、`UMD`形式で配布できるようにする

１．Webpack のインストール

npm i -D webpack webpack-cli ts-loader

※ ts-loader は、Typescript を Webpack で処理するために必要なプラグインです。

２．tsconfig.umd.json の追加

UMD形式で出力する場合の、typescript設定ファイルを追加します。

"extends": "."は、同一ディレクトリにあるtsconfig.jsonの継承を意味します。

{
  "extends": ".",
  "compilerOptions": {
    "module": "ESNext"
  },
  "exclude": ["node_modules", "dist", "src/**/__tests__/*"]
}

３．webpack.config.js の追加

monorepo(npm workspaces) を使用している場合、追加するディレクトリはパッケージの直下です。
例えば、パッケージが /<rootDir>/packages/a の場合、ファイルは /<rootDir>/packages/a/webpack.config.js となります。

const path = require('path'); // eslint-disable-line

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist/umd'),
    filename: 'index.js',
    library: 'conditionals',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: '/node_modules/',
        use: {
          loader: 'ts-loader',
          options: {
            configFile: 'tsconfig.umd.json',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

４．package.json の編集

monorepo(npm workspaces) を使用している場合、編集するのはパッケージ直下のファイルです。

{
  ...,
  "scripts": {
    ...,
    "build:umd": "webpack", // 追加
    ...
  },
  ...
}