Webpack 未将 ES6 转换为 ES5 [英] Webpack not converting ES6 to ES5

问题描述

我对 Webpack 非常陌生.我想我做错了.我想使用 babel 将 ES6 函数转换为 ES5 函数.所以我做了一些研究，我找到了 babel-loader.但是，我不确定自己在做什么.

I'm very new to Webpack. I think I'm doing it incorrectly. I would like to convert an ES6 function to ES5 function using babel. So I did some research and I found babel-loader. However, I'm not sure what I'm doing.

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

I ran npm install babel-loader --save-dev and it got added into my package.json

//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

// 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 语法

// app/index.js - I just added some random useless function in ES6 syntax. I was hoping I'll see the ES5 format in my bundle.js file but it didn't change. It's still ES6 syntax in bundle.js

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

// app/component.js

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

推荐答案

如果你想把 ES6 编译成 ES5 你需要安装 Babel ES2015 预设.

If you want to compile ES6 to ES5 you need to install Babel ES2015 preset.

npm install babel-preset-es2015

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

Then you need to enable this preset. One way to enable this ES6 to ES5 compilation is using babel-loader query string:

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

或查询选项:

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

这篇关于Webpack 未将 ES6 转换为 ES5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！