Question

我对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;
};

Answer 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']
        }
      }
    ]
  }

Answer 2

对于webpack 3，模块选项应该类似于

module: {
  rules: [
    {
       use: {
          loader:'babel-loader',
          options: { presets: ['es2015'] }
       },
       test: /\.js$/,
       exclude: /node_modules/
    }
  ]
},

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

Answer 3

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

Answer 4

我遇到了同样的问题。好吧，官方回应将此配置添加到webpack的答案

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

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

Answer 5

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

...

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

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

Webpack没有将ES6转换为ES5

5 个答案: