webpack Babel を利用して、アロー関数等の新しいコードをIEで動くよう変換したい

前提・実現したいこと

webpack Babel を利用して、アロー関数等の新しい
コードをIEで動かしたいと思っているのですがうまくいきません。
JavaScript開発経験が浅く、単純に手順が間違っているだけ
とは思うのですが、なにかご助言をいただけないでしょうか。

試したこと

１）npm で webpack babel 等をインストールする

package.json

{
  "name": "testbabel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5"
  }
}

2）.babelrc webpack.config.js 等を準備する

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ]
  ]
}

webpack.config.js

module.exports = {
  mode: 'development'
};

3)テスト用のJSと、HTMLを準備する

src/index.js

import '@babel/polyfill';

Promise.resolve();

let getTriangle = (base, height) => {
  return base * height / 2;
};

console.log('三角形の面積は'　+ getTriangle(10,2));

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>babeltest</title>
    <script type="text/javascript" src="dist/main.js"></script>
  </head>
  <body>

  </body>
</html>

4)コマンドプロンプトでWebpackのコマンドを流す

> node_modules.bin\webpack

5）結果、次のような構成になりました

testbabel
ーdist
ーーmain.js
ーnode_modules
ーー(省略)
ーsrc
ーーindex.js
ー.babelrc
ーindex.html
ーpackage-lock.json
ーpackage.json
ーwebpack.config.js

IEで起きているエラー

上記のような構成のまま、tomcat上にデプロイしたところ
クロームでは問題ないですがIE11でエラーが発生しました。
Eval関数でエラーが起きているようです。

SCRIPT1002: 構文エラーです。

エラー箇所のソースコード

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/polyfill */ \"./node_modules/@babel/polyfill/lib/index.js\");\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\n\r\n\r\nPromise.resolve();\r\n\r\nlet getTriangle = (base, height) => {\r\n  return base * height / 2;\r\n};\r\n//console.log('三角形の面積は'　+ getTriangle(10,2));\r\n\n\n//# sourceURL=webpack:///./src/index.js?");

webpack babel 等を勉強中なのですが、なかなかうまく行きません。
改めまして、何卒ご助言をお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

Babelが全く効いていないようです。babel-loaderを入れて、webpack.config.jsにも追加してください（README）。

投稿2019/02/15 01:51

maisumakun

総合スコア145184

figfig

2019/02/15 02:40

ありがとうございます。解決しました！大変助かりました。まだまだわからないところだらけですが、勉強していこうと思います。ただもう一点、よければお伺いしたいのですが、index.js に fetch を足したら未定義エラーが発生しました。こちら、なにか別途プラグインの追加が必要なのでしょうか。よろしければご教授お願いいたします。

maisumakun

2019/02/15 03:57

fetchはブラウザのAPIなので、JavaScriptの差を補う@babel/polyfillには含まれません。別途polyfillが必要です。

figfig

2019/02/15 05:26

ご返信ありがとうございます。なるほどJavascript の違いとはまた別問題だったんですね。今後調べ物をするときの参考にさせていただきます。 fetchに関しては isomorphic-fetch というのをインストールしたら動きました。ただ、私が浅学過ぎて一個進めばまた別のバグが出る有様です。頑張って勉強します。重ね重ねありがとうございました！

行動規範の内容に同意します