数学講師2917156 views
高校生物553405 views
中学理科1634014 views
英語618016 views
ヒストリア295739 views
小学理科721990 views
小学社会311664 views
世界の国567837 views
高校化学2934298 views
小学算数1204208 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 の設定が重要です。