TypeScript + Rollupで画像をバンドルする際にハマったポイント

きちんと動作検証を済ませたわけではないので、完全にメモ書き。

以下のような構成のコンポーネントをnpmモジュール化しようとする。

index.ts
/components/
  foo.vue
  bar.vue
  buz.vue
/assets/
  hoge.png
  hage.png

このような場合、以下のような型定義ファイルを作ることでバンドルできるようになる。

declare module "*.png" {
    const value: any;
    export = value;
 }

この場合のrollupの設定は以下のようになる。

import vue from 'rollup-plugin-vue'
import commonjs from 'rollup-plugin-commonjs'
import ts from "rollup-plugin-typescript2";
import resolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image';
import copy from 'rollup-plugin-copy';

export default [
  {
    input: 'src/index.ts',
    output: {
      format: 'cjs',
      file: 'dist/index.js',
    },
    external: ['vue'],
    plugins: [
      ts({
        tsconfig: 'tsconfig.json',
        experimentalDecorators: true,
        module: 'es2015',
        objectHashIgnoreUnknownHack: true
      }),
      copy({
        targets: [{ src: 'src/css', dest: 'dist/' }, { src: 'src/assets', dest: 'dist/' }  ]
      }),
      resolve(),
      commonjs(),
      vue({
          css: true,
          compileTemplate: true,
          needMap: false,
      }),
      image()
    ]
  }
]

これで確かにnpmモジュール化はできるのだが、このnpmモジュールを使ったVueプロジェクトを作成し、Vue CLIでビルドしようとするとエラーになってしまう。

workaroundとしては、利用する側のアプリケーションにも先の型定義ファイルを作成することでビルドは一応できるようになる。