[js] テンプレートリテラルがIEで動作しない問題

• テンプレートリテラルがIEでは動作しない問題の対応。
• Babelを使ってコンパイルして解消する。

コード例

html = html +
`<div class="m_main-visual__thumbnail ${is_current}" id="image-index-${index}" data-image-index="${index}">
<a href="javascript:void(0);"><img src="${elm}" alt=""></a>
</div>`;

Webpackでの対応

[package.json]

︙
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
︙

[webpack.config.js]

︙
  module: {
    rules: [{
        test: /\.js$/, // files ending with .js
        exclude: /node_modules/, // exclude the node_modules directory
        loader: "babel-loader" // use this (babel-core) loader
      }
    ],
  }
︙

[.babelrc]

{
    "presets": ["es2015"]
}

参考

• Need to help: Template literals, backticks on IE 11 not working · Issue #7836 · babel/babel