Rollup における @rollup/plugin-node-resolve

@rollup/plugin-node-resolve は、npm パッケージを node_modules から解決するためのプラグイン。

Rollup はデフォルトでは以下のような import しか解決できません:

// 相対パスによる import（解決できる）
import {utils} from './utils'
import {helpers} from '../helpers'

以下のような import は解決できません:

// npm パッケージの import（解決できない）
import lodash from 'lodash'
import {format} from 'date-fns'

@rollup/plugin-node-resolve を追加すると、node_modules からパッケージを探して解決できるようになります。

resolve() が必要なケース

プロジェクトで npm パッケージを使う場合:

// main.ts
import {debounce} from 'lodash'
import {format} from 'date-fns'
import {parseISO} from 'date-fns'

export function delayedFormat(dateString: string): string {
	const date = parseISO(dateString)
	return debounce(() => format(date, 'yyyy-MM-dd'), 300)()
}

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'

export default {
	input: 'main.ts',
	output: {
		file: 'bundle.js',
		format: 'iife'
	},
	plugins: [
		resolve(),  // ← 必要
		typescript()
	]
}

resolve() が不要なケース

プロジェクトで npm パッケージを使わない場合:

// main.ts
import {post} from 'core'  // external として扱う
import {completeLogin} from './complete'  // 相対パス
import {showLoginError} from './message'  // 相対パス

export async function handleLogin(): Promise<void> {
	const response = await post('/api/login', {})
	await completeLogin(response)
}

// rollup.config.js
import typescript from '@rollup/plugin-typescript'

export default {
	input: 'main.ts',
	output: {
		file: 'bundle.js',
		format: 'iife',
		globals: {
			'core': 'MyAppCommon'
		}
	},
	external: ['core'],
	plugins: [
		// resolve() なし
		typescript()
	]
}

この場合:

'core' は external で外部依存として扱われる
'./complete' などは相対パスなので Rollup がデフォルトで解決できる
node_modules からのインポートがないので resolve() は不要