LaTeX963205 views
高校化学2926977 views
小学社会310824 views
りんご213160 views
高校生物552189 views
高校物理160808 views
世界の国565381 views
MathPython498591 views
高校日本史190688 views
小学算数1201510 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 の設定が重要です。