Rollup + Typescript + Vue2 (+ vue-property-decorator) コンパイル手順

rollupのインストール

$ npm install --global rollup

rollup.config.tsファイルを作成

最もシンプルな設定の場合

// rollup.config.ts
export default {
	input: 'src/main.ts',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	}
};

input に単一ファイルを指定する
Outputに出力したい形式を指定
Pluginに適宜必要なファイルに応じて定義

コンパイルしたいファイルに合わせてプラグインをimport

import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json"
import typescript from "@rollup/plugin-typescript";
import vue from "rollup-plugin-vue";
import copy from 'rollup-plugin-copy';
import scss from 'rollup-plugin-scss';
import postcss from 'rollup-plugin-postcss';
import babel from "@rollup/plugin-babel";

index.tsファイルを作成し、コンパイルしたいファイルをまとめる

import SomeFunction from ‘./path/to/hogehoge.ts’
// 定義が複数ある場合は
import * as ManyFunction from ‘./path/to/manyFunction.ts’

export {
  SomeFunction,
  ManyFunction
}

tsconfig.jsonでrollup.config.tsをincludeする

"include": [
        "rollup.config.ts" ⇦ typescriptではここでrollup.config.tsを読み込めるようにする
    ],

設定関連の注意事項

※Vue2の場合はpackage.jsonでrollup-plugin-vueのバージョンを"rollup-plugin-vue": "^5.0.0”,をインストールする必要がある
※vue-property-decoratorで利用しているとdecoratorの部分でエラーなる

[!] RollupError: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
lib/scripts/replay_modal.ts (14:0)
12: // } from '../../../ink-helper/index'
13: import { LOG } from "./Utilities.mjs";
14: @Component({

tsconfig.jsonで"experimentalDecorators": trueにする

tsconfig.json

{
 "compilerOptions": {
        "resolveJsonModule": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "experimentalDecorators": true, ⇦これを追加する
    }
}