@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() は不要