高校倫理1433840 views
LaTeX957673 views
中学英語809046 views
中学理科1626729 views
世界の国560930 views
英語608453 views
MathPython492025 views
高校国語785873 views
小学社会308762 views
りんご194232 views
Help
Tools

English

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