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

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