Webpack 没有将 ES6 转换为 ES5

Posted 2023-03-08

【中文标题】Webpack 没有将 ES6 转换为 ES5

【英文标题】：Webpack not converting ES6 to 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 提出了这个问题。

【参考方案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' 什么都不做，一切都安装正确。

提醒：这可能不适用于您今天的版本。阅读下面的答案：***.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://***.com/a/65376531/10691147