JS 製フレームワーク Svelte を使うにあたって Rollup でビルドをする時の設定

最終更新日:

Svelte を使う時に Rollup を初めて触ったのだけど、
色々パッケージを入れてしっかりビルドできるまで調べるのに時間がかかった。
ので軽いメモ。

Svelte とは

Svelte 以外に npm でインストールしたパッケージ

エラーが解決できず、インストールを断念したパッケージ

rollup.config.js で出た主なエラー (ビルドエラー)

  • rollup/rollup-plugin-json で解決
    • Error: Unexpected token (Note that you need rollup-plugin-json to import JSON files)
  • calvinmetcalf/rollup-plugin-node-builtins で解決
    • Missing shims for Node.js built-ins
  • パッケージ毎に解決策が違う
    • Unresolved dependencies
    • Missing global variable names
    • Circular dependency
    • Use output.globals to specify browser global variable names corresponding to external modules
      request (guessing 'request')

bundle.js で出た主なエラー (ブラウザエラー)

  • パッケージ毎に解決策が違う
    • process is not defined xxxxx
    • Failed to construct 'Request': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

解決まで

パッケージ毎に解決策が違っていて「ここを修正すれば全てが解決」というわけにもいかなかった。
解決できる範囲が狭いこともあり、情報も少なかったので時間がかかった。
基本的にはパッケージ先の github の isuue を検索したり README.md を見て解決した。

例えば axios を導入していた時に見ていたページ

Rollup の修正

$ cd /path/to/your/project
$ npm install --save-dev rollup-plugin-json
$ npm install --save-dev rollup-plugin-node-builtins
$ npm install --save-dev rollup-plugin-node-globals

rollup.config.js

$ vi rollup.config.js 

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

// 下記追加インポート
import globals from 'rollup-plugin-node-globals';
import builtins from 'rollup-plugin-node-builtins';
import json from 'rollup-plugin-json';

const production = !process.env.ROLLUP_WATCH;

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/bundle.js',
	},
	plugins: [
		svelte({
			dev: !production,
			css: css => {
				css.write('public/bundle.css');
			}
		}),
		
		resolve({ browser: true }),// browser: true 追加
		commonjs(),

		!production && livereload('public'),
		production && terser(),

		// 下記追加
		builtins(),
		globals(),
		json(),
	],
};