Rollup IIFE ビルドにおける esModuleInterop の効果

esModuleInterop の設定は、IIFE 形式でビルドした際の exports パターンに 影響を与えません

tsconfig.json での設定

{
  "compilerOptions": {
    "module": "ES2015",
    "esModuleInterop": true  // または false
  }
}

rollup.config.js での設定

const jsConfig = {
	input: 'common/index.ts',
	output: {
		file: 'public/js/common.js',
		format: 'iife',
		name: 'MyAppCommon'
	},
	plugins: [
		typescript({
			tsconfig: 'common/tsconfig.json'
		})
	]
}

ビルド結果(esModuleInterop: true の場合)

var MyAppCommon = (function (exports) {
    'use strict';
    
    function post(path, data) { ... }
    function load(name, value) { ... }
    
    exports.post = post;
    exports.load = load;
    
    return exports;
    
})({});

ビルド結果(esModuleInterop: false の場合)

var MyAppCommon = (function (exports) {
    'use strict';
    
    function post(path, data) { ... }
    function load(name, value) { ... }
    
    exports.post = post;
    exports.load = load;
    
    return exports;
    
})({});

結果

どちらも同じ exports パターンで出力されます。

esModuleInterop の設定値に関係なく、以下の形式になります:

  • (function (exports) { ... })({}) パターン
  • exports.functionName = functionName で関数を追加
  • return exports で返す

esModuleInterop は主に CommonJS との interop に関する設定であり、IIFE 出力形式には影響しません。IIFE の出力形式を制御するには、export の書き方や module の設定が重要です。