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