Vue+TypeScript+Rollupでのnpmパッケージ作成メモ

475
NO IMAGE
目次

前提

Vue-CLIなどでVue+TypeScriptのプロジェクトを作成済みであること。

Rollupの導入

Vue-CLIはvue-cli-service build --target libでプロジェクトをライブラリとしてビルドできるが、TypeScriptで型を付けてnpmパッケージとして扱いたい。公式ではrollupを使った方法が紹介されているので、それに倣ってrollupを使うことにする。

この時、以下のパッケージを追加でインストールする必要がある。（いずれもnpm install --devもしくはyarn add -Dでよい。）

rollup
rollup-plugin-commonjs
rollup-plugin-typescript2
node-plugin-vue
@rollup/plugin-node-resolve

公式のものは@rollupスコープに配置されるようになったようで、公式のプラグイン一覧にtypescriptもあるのだが、公式のプラグインは使わない。何故なら記事執筆時点のバージョン2.0.2では.d.tsが生成されなかったからだ。TypeScriptのプラグインは複数存在するが、

  • 公式の手順をそのままTypeScriptに置き換えた時、export用TSファイルの.d.tsが生成される。
  • TypeScriptでscript内部が記述された.vueファイルの.d.tsファイルが生成される。

上記を満たすのはrollup-plugin-typescript2だけのようだ。他のプラグインでも実はできるのかもしれないが、rollup-plugin-typescript2では特に何も工夫せずともできたのでこれを使うことにする。

rollup.config.jsとexport用TSのサンプル

rollup.config.js

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';
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
      }),
      resolve(),
      commonjs(),
      vue({
          css: true,
          compileTemplate: true,
          needMap: false,
      }),
    ]
  },
]

src/index.ts

import Comp1 from './components/Comp1.vue';
import Comp2 from './components/Comp2.vue';
import View1 from './views/View1.vue';
import View2 from './views/View2.vue';

export {Comp1, Comp2, View1, View2};

トラブルシュート

時々rollupした結果のindex.jsの冒頭付近の_interopDefaultの部分がおかしな値になって実行時に構文エラーになる。

どうもパッケージのインストール順序によるのか、バージョンが少し古かったり整合性がなかったりするとその問題になる事があるように思える。（再現手順が確立できていないので不明。）

rollup関連のパッケージを全部アップデートすることで解消はしている。以下は動作確認したバージョン。

    "@rollup/plugin-node-resolve": "^6.0.0",
    "rollup": "^1.28.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-typescript2": "^0.25.3",
    "rollup-plugin-vue": "5.1.1",