babel-loader 没有在转译文件中插入

Question

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

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,...”) 的内容中.

我错过了什么？

Answer 1

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

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

npx browserlist

哪个应该给你浏览器列表 @babel/preset-env 是目标。

尽管如此。你在那里拥有的东西不需要改造。您可能正在考虑模板文字：

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

注意字符 ` 不同于 '.

我认为在撰写本文时应在默认安装中对其进行转换 post。由于 IE11 不支持模板文字并且它在浏览器列表中。

babel-loader 没有在转译文件中插入

babel-loader is not interpolating in transpiled file

javascript

webpack

babel-loader