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