ブログ

今度はVue3のTypeScriptコンポーネントをrollupでバンドルする

以前、「Vue3をrollupでバンドルする」の記事でVue3をrollupでバンドルする手順を説明しました。その時はTypeScriptは使わずJavaScriptだけでしたが、今回は一部コンポーネントをTypeScript化したので、TypeScriptのSFC(Single File Component)をrollupでバンドルする方法を説明したいと思います。

前回も結構手こずったのですが、今回も時間がかかってしまいました。バンドルまわりはいつもこんな感じなので、Vue3のSFCをバンドルする色々な例をまとめてgithubにアップしておきました。急いで結果だけ確認したい人はそちらを参照してください。

JavaScriptのみのケース、TypeScriptを使うケース。バンドラーはrollupを使うケース、webpackを使うケースが置いてあります(詳細はリンク先のREADMEを参照)。

TypeScriptのSFCをrollupでバンドルする例はvue3-ts-rollupになります。

TypeScriptのSFCをバンドルする

具体的なバンドル設定の説明に入りますが、既に、JavaScriptのSFCはrollupでバンドルできているものとして、「Vue3をrollupでバンドルする」をベースに説明します。必要に応じて、「Vue3をrollupでバンドルする」の記事を参照してください。

まず、SFCのバンドルをTypeScriptに対応するにあたって、追加で必要になるモジュールは以下のとおりです。

• rollup-plugin-typescript2
• typescript

$ npm install -D rollup-plugin-typescript2 typescript

これで、package.jsonに以下のモジュールがあれば必要なものは最低限揃っています。

package.jsonの例

{
  "name": "vue3-ts-rollup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c rollup.config.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@rollup/plugin-alias": "^4.0.3",
    "@rollup/plugin-node-resolve": "^15.0.1",
    "@rollup/plugin-replace": "^5.0.2",
    "@rollup/plugin-typescript": "^11.0.0", ←このモジュールは不要(詳細は後報)
    "rollup": "^3.17.2",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-typescript2": "^0.34.1",
    "rollup-plugin-vue": "^6.0.0",
    "typescript": "^4.9.5"
  }
}

次にrollupのconfig例です。こちらも「Vue3をrollupでバンドルする」の設定がベースになっています。

rollup.config.jsの例

import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import typescript2 from 'rollup-plugin-typescript2';
import replace from '@rollup/plugin-replace';
import alias from '@rollup/plugin-alias';
import vue from 'rollup-plugin-vue'; // .vueファイルimport用
import postcss from 'rollup-plugin-postcss';

export default {
  input: 'src/index.ts',
  output: {
    format: 'iife',
    sourcemap: true,
    file: 'public/main.js'
  },
  plugins: [
    nodeResolve({browser: true}),
    alias({
      entries: [
        {find: 'vue', replacement: './node_modules/vue/dist/vue.esm-bundler.js'},
      ]
    }),
    // for importing vue
    // https://v2.ja.vuejs.org/v2/guide/installation.html
    replace({
      preventAssignment: true,
      "process.env.NODE_ENV": JSON.stringify('production'),
    }),
    // .vue内の<script>タグ内をtsとして扱うにはrollup-plugin-typescript2を
    // 使う必要がある。@rollup/plugin-typescriptだとなぜかjsとして
    // 扱われてしまう。
    //typescript(),
    typescript2(),
    vue(),
    // .vue内で<style>タグを使うための設定。
    postcss(),
  ]
};

赤色箇所がTypeScriptに対応するために追加した設定になります(*1)。

一点はまったのが、rollupのtypescriptプラグインです。コメントアウトされていますが、当初、rollup標準の@rollup/plugin-typescriptを使おうとしたのですが、以下のようなエラーになりました。

RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)
(* エラーの内容はソースコードにより変わります)

.vueファイル内の<script lang="ts"></script>内のコードがTypeScriptではなく、JavaScriptとして認識されていたため、TypeScript固有の文法でUnexpected tokenエラーになっていたようでした。これは結局、バグなのか単にプラグインが対応していないだけなのかはわかりませんでした。

解決策としてはrollup-plugin-typescript2プラグインを使うことです。

バンドルの設定に関しては以上です。

TypeScriptのSFCを作成することについては、Vueコンポーネントを書いたことがあり、TypeScriptが使える人ならつまづくことはないでしょう。.vueファイル内のscriptタグにlang="ts"属性の指定を忘れないようにすることぐらいでしょうか。

TypeScriptのVueコンポーネントについては、githubリポジトリのvue3-ts-rollup/src/components/counter-component-ts.vueを直接みていただいた方が早いでしょう。

以上、かなり駆け足でTypeScriptのSFCをrollupでバンドルする方法を説明してみました。
1年もするとまた動かなくなってそうなのが嫌なんですよね。
バンドルまわりの設定辛い。。。

(*1) .vueファイルに<style>タグを使っているので、こっそりpostcss()も追加していますが、TypeScript対応には本質的に関係ありません。

投稿日:2023/02/25 22:58

タグ: Webアプリ Vue.js