HippoBlog
Web開発に関する備忘録や
日々の雑記ブログ
  • #JavaScript
  • 2019年7月12日
ENTRY TITLE

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

TEXT BY @hippohack@hippohack
TEXT BY @hippohack@hippohack
  • このエントリーをはてなブックマークに追加
  • テンプレートリテラルが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"]
}

参考


最後までお読みいただき、ありがとうございました。

ご意見などありましたら@hippohackへDMをお願いいたします。

  • このエントリーをはてなブックマークに追加