node.js Webpack 未将 ES6 转换为 ES5
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34404496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack not converting ES6 to ES5
提问by devwannabe
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.
我对 Webpack 很陌生。我想我做错了。我想使用 babel 将 ES6 函数转换为 ES5 函数。所以我做了一些研究，我找到了 babel-loader。但是，我不确定我在做什么。
I ran npm install babel-loader --save-dev and it got added into my package.json
我运行 npm install babel-loader --save-dev 并将其添加到我的 package.json 中
// package.json
// 包.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 - 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
// 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
// 应用程序/component.js
module.exports = function() {
var element = document.createElement('h1');
element.innerHTML = 'hello world';
return element;
};
回答by dreyescat
If you want to compile ES6 to ES5 you need to install Babel ES2015 preset.
如果要将 ES6 编译为 ES5，则需要安装 Babel ES2015 preset。
npm install babel-preset-es2015
Then you need to enable this preset. One way to enable this ES6 to ES5 compilation is using babel-loaderquery string:
然后你需要启用这个预设。启用此 ES6 到 ES5 编译的一种方法是使用babel-loader查询字符串：
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader?presets[]=es2015'
}
]
}
or query option:
或查询选项：
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
回答by PhilVarg
for webpack 3, the module options should look like
对于 webpack 3，模块选项应该看起来像
module: {
rules: [
{
use: {
loader:'babel-loader',
options: { presets: ['es2015'] }
},
test: /\.js$/,
exclude: /node_modules/
}
]
},
this still requires babel-loaderand babel-preset-es2015
这仍然需要babel-loader和babel-preset-es2015
回答by Wildhammer
babel-preset-es2015 is deprecated. Try:
babel-preset-es2015 已弃用。尝试：
npm install -D babel-loader @babel/core @babel/preset-env webpack
then in your webpack.config.js :
然后在你的 webpack.config.js 中：
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
回答by Inessa Pokromkina
I got the same problem. Well, official react answer to add this configurations to webpack
我遇到了同样的问题。好吧，官方反应回答将此配置添加到 webpack
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["react-hot-loader/babel"]
}
here is the link: https://github.com/facebook/react/issues/8379
