バンドルしたい(rollup)
$ rollup -c
$ rollup -c --watch
rollupは、JavaScript/TypeScriptをひとつのファイルにまとめるツールです。
GAS本体はモジュール化した構造を扱うことができません。
ローカルでモジュール開発し、GASにデプロイする前にrollupでひとつにまとめるという作業フローになります。
インストールしたい(rollup)
// devDependenciesに追加
$ npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-typescript
rollup本体と関連するパッケージはdevDependencies(--save-dev)としてプロジェクトに追加すればOKです。
@rollup/plugin-node-resolveはnode_modules内のパッケージを解決するプラグイン、
@rollup/plugin-typescriptはTypeScriptを直接読み込んでバンドルするプラグインです。
スクリプト設定したい(package.json)
{
"name": "...",
"...": "...",
"scripts": {
"bundle": "rollup -c",
"bundle:watch": "rollup -c --watch",
"...": "..."
}
}
npm scriptsのbundleとbundle:watchを設定したサンプルです。
$ npm run bundle
$ npm run bundle:watch
それぞれnpm run bundle、npm run bundle:watchで実行できます。
tscによる型チェック(tsc --noEmit)と役割が分かれるように、
buildではなくbundleという名前にしています。
設定したい(rollup.config.js)
1import { nodeResolve } from "@rollup/plugin-node-resolve";
2import typescript from "@rollup/plugin-typescript";
3
4export default {
5 input: "src/index.ts",
6 output: {
7 file: "gas/code.bundle.js", // .clasp.jsonと同じディレクトリに出力
8 format: "iife", // GAS向けにIIFE形式でまとめる
9 name: "myLib",
10 sourcemap: true,
11 },
12 plugins: [
13 nodeResolve(),
14 typescript({ declaration: false, outDir: undefined }),
15 ],
16};
rollup.config.jsでrollupを設定できます。
typescript()プラグインが、tsconfig.jsonの設定を読みつつ.tsファイルを直接読み込んでバンドルします。
tscを別途実行してJavaScriptに変換しておく必要はありません。
注釈
tsconfig.json側でoutDirやdeclaration(型定義ファイルの出力)を指定していても、
rollupでバンドルする際は不要になるため、プラグインのオプションで打ち消しておくと安全です。