Webpack 没有将 ES6 转换为 ES5答案

【问题标题】：Webpack not converting ES6 to ES5Webpack 没有将 ES6 转换为 ES5
【发布时间】：2016-03-28 01:08:57
【问题描述】：

我对 Webpack 很陌生。我认为我做错了。我想使用 babel 将 ES6 函数转换为 ES5 函数。所以我做了一些研究，发现了 babel-loader。但是，我不确定我在做什么。

我运行了 npm install babel-loader --save-dev 并将它添加到我的 package.json 中

// package.json

{
  "name": "kanban",
  "version": "1.0.0",
  "description": "kanban",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "html-webpack-plugin": "^1.7.0",
    "json-loader": "^0.5.4",
    "webpack": "^1.12.9"
  }
}

// webpack.config.js

var path = require('path');
var HtmlwebpackPlugin =  require('html-webpack-plugin');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

module.exports = {
  entry: PATHS.app,
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Kanban app'
    })
  ],
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }
    ]
  }
};

// app/index.js - 我只是在 ES6 语法中添加了一些随机无用的函数。我希望我能在我的 bundle.js 文件中看到 ES5 格式，但它没有改变。 bundle.js 中仍然是 ES6 语法

var component = require('./component');
var app = document.createElement('div');
document.body.appendChild('app');
app.appendChild(component());

let myJson = {
  prop: 'myProp'
};

let fives = [];
nums = [1, 2, 5, 15, 25, 32];

// Statement bodies
nums.forEach(function (v) {
  if (v % 5 === 0) {
    fives.push(v);
  }
}, this);

console.log(fives);

let sum = (a, b) => a + b;

// app/component.js

module.exports = function() {
  var element = document.createElement('h1');
  element.innerHTML = 'hello world';
  return element;
};

【问题讨论】：

你期望它会做什么？您必须在控制台或任务运行器（grunt、gulp、...）中使用 babel 编译您的脚本。 babeljs.io/docs/usage/cli
非常感谢。我以为 Webpack 会通过 babel-loader 为我做这件事。
我希望 Webpack 调用 babel 并尽可能不使用 grunt 或 gulp
我在 2 秒内在 google 上找到了所有你需要的东西。提问前请先搜索一下！ 2ality.com/2015/04/webpack-es6.html
Ludo，当我进行搜索时，这个 S.O.问题是发生了什么。我很高兴它做到了，因为我得到了我正在寻找的答案（谢谢，@dreyescat），而无需像你链接到的那样搜索整页教程（虽然有时很棒，但有时也没有我需要的具体答案）。每个人都以不同的方式学习，对我来说，Stack Overflow 通常是我获得快速答案的首选方式。所以我很高兴 OP 提出了这个问题。

标签： node.js webpack babeljs

【解决方案1】：

如果你想将 ES6 编译成 ES5 需要安装 Babel ES2015 preset。

npm install babel-preset-es2015

然后您需要启用此预设。启用此 ES6 到 ES5 编译的一种方法是使用 babel-loader 查询字符串：

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader?presets[]=es2015'
      }
    ]
  }

或查询选项：

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }

【讨论】：

非常感谢！我回家后会试试的。我总是断开与网络的连接。
它使用这个加载器配置模块工作：{ loaders: [ { loader: 'babel-loader', test: path.join(__dirname, 'app'), query: { presets: 'es2015' , } } ] }
这似乎没有效果。仍在发出 ES6 代码。
这实际上是行不通的。 Preset 'es2015' 什么都不做，一切都安装正确。
提醒：这可能不适用于您今天的版本。阅读下面的答案：stackoverflow.com/a/59328252/5281187

【解决方案2】：

babel-preset-es2015 已弃用。试试：

npm install -D babel-loader @babel/core @babel/preset-env webpack

然后在你的 webpack.config.js 中：

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

more info

【讨论】：

确认这适用于 webpack 的现代安装。检查您的项目版本。
是的，它已被弃用。当我现在执行 npm install babel-preset-es2015 时，它注意到我：已弃用 babel-preset-es2015@6.24.1: ????感谢您使用 Babel：我们建议现在使用 babel-preset-env：请阅读 babeljs.io/env 进行更新！我现在在 .babelrc 文件中得到了以下代码，它按预期工作： { "presets":["env", "react"] }

【解决方案3】：

对于 webpack 3，模块选项应该是这样的

模块： { 规则：[ { 采用： { loader:'babel-loader', 选项：{预设：['es2015']} }, 测试：/\.js$/，排除：/node_modules/ } ] },

这仍然需要babel-loader 和babel-preset-es2015

【讨论】：

【解决方案4】：

我遇到了同样的问题。 React 官方的回答是将此配置添加到 Webpack。

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

这里是链接：https://github.com/facebook/react/issues/8379

【讨论】：

【解决方案5】：

您还应该在webpack.config.js 中添加target: "es5"

...

module.exports = {
  ...
  module: {
    target: "es5", // add this
    loaders: [
      { test: /\.js$/, loader: 'babel-loader' }
    ]
  }
};

详情请见https://stackoverflow.com/a/65376531/10691147

【讨论】：