babelでトランスパイルしたときに、this を void 0 に変えてしまう設定を無効化したメモ


現象

  • elmの吐き出したjsをbabelにかけたら動作しなくなった
  • (this)void 0 に変更されていたのが原因。

対応

babel.config.jsにoverridesオプションをつけて対応

babel.config.js-before
const presets = [
  [
    "@babel/env",
    {
      targets: {
        chrome: "70"
      },
      useBuiltIns: "entry"
    },
  ],
];

module.exports = { presets };
babel.config.js-after
const presets = [
  [
    "@babel/env",
    {
      targets: {
        chrome: "70"
      },
      useBuiltIns: "entry"
    },
  ],
];
const overrides = [{
  test: "./src/assets/elm/ElmTest.js",
  sourceType: "script",
}];
module.exports = { presets, overrides };

結果

src/assets/elm/ElmTest.js-before
// 省略
  _Platform_export({
    'Main': {
      'init': author$project$Main$main(elm$json$Json$Decode$succeed(0))(0)
    }
  });
})(void 0);
src/assets/elm/ElmTest.js-after
// 省略
  _Platform_export({
    'Main': {
      'init': author$project$Main$main(elm$json$Json$Decode$succeed(0))(0)
    }
  });
})(this);

参考

stack over flow: how to stop babel from transpiling this to undefined
stack over flow: how to properly overrides
babel overrides