いろは3002230 views
高校物理159249 views
高校化学2919622 views
高校国語787186 views
LaTeX960097 views
中学数学622753 views
数学講師2873614 views
小学理科718778 views
小学社会309339 views
りんご203078 views

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 の設定が重要です。