babel-loader 未在转译文件中进行插值

问题描述

我正在学习 webpack，并且有一个简单的 javascript，它使用了一些 ES6。

function sayHello(){
  let tool = 'webpack';
  alert('Hello I am ${tool},welcome to ES6');
}

/*module.exports = sayHello;*/

// use ES6 modules
export { sayHello };

我已经像这样配置了 babel-loader

 module: {
    rules: [
      {
        test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }

如果我检查转译后的文件，我会发现它将 let 转换为 var，但我期望它会将“${tool}”插入到诸如“.concat(tool,...”之类的内容)。

我错过了什么？

解决方法

@babel/preset-env 将仅对特定目标使用转换。这意味着如果目标环境相当新，则只应用几个转换；如果目标环境较旧，则应用大量转换。

您可以使用以下方法检查默认值：

npx browserlist

哪个应该为您提供 @babel/preset-env 定位的浏览器列表。

话虽如此。你在那里拥有的东西不需要转换。您可能正在考虑模板文字：

alert(`Hello I am ${tool},welcome to ES6`);

注意字符 ` 与 ' 不同。

在撰写本文时，我认为应该在默认安装上进行转换。由于 IE11 不支持模板文字，因此它在浏览器列表中。