Webpack: ES6 syntax gives Module build failed: SyntaxError: Unexpected token
Webpack: ES6 syntax gives Module build failed: SyntaxError: Unexpected token
我正在尝试使用固定数据的示例-table,并将其与 webpack 捆绑在一起。
我正在使用 babel-loader 并且我的代码在其他方面没有问题地捆绑在一起。
运行 webpack
指向一个错误,据我所知这是 ES6 语法的一部分(不是 ES5)... ...
,例如这里:
render() {
var {sortDir, children, ...props} = this.props;
具体 ...props
。
这是我的 webpack 配置:
"use strict";
var webpack = require("webpack");
module.exports = {
entry: {
app: './app.js',
vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis", "chart.js"],
},
output: { path: "./", filename: 'bundle.js' },
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
我正在使用 es2015 并作为预设做出反应并使用 babel-loader 加载。为什么它应该理解和处理 ES6 语法却抛出语法错误?
这是我的 Package.json。我可能需要升级某些版本吗?
{
"name": "test",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-runtime": "^6.3.19",
"webpack": "^1.12.9"
},
"dependencies": {
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"fixed-data-table": "^0.6.0",
"jquery": "^3.1.0",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"vis": "^4.17.0"
},
"description": ""
}
我需要 babel 预设向后兼容 ES7。
解决者:
npm install babel-preset-stage-0 --save-dev
接着在上面的webpack config中加入preset:
presets: ['es2015', 'react', 'stage-0']
我正在尝试使用固定数据的示例-table,并将其与 webpack 捆绑在一起。
我正在使用 babel-loader 并且我的代码在其他方面没有问题地捆绑在一起。
运行 webpack
指向一个错误,据我所知这是 ES6 语法的一部分(不是 ES5)... ...
,例如这里:
render() {
var {sortDir, children, ...props} = this.props;
具体 ...props
。
这是我的 webpack 配置:
"use strict";
var webpack = require("webpack");
module.exports = {
entry: {
app: './app.js',
vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap", "vis", "chart.js"],
},
output: { path: "./", filename: 'bundle.js' },
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
module: {
loaders: [
{
test: /.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
};
我正在使用 es2015 并作为预设做出反应并使用 babel-loader 加载。为什么它应该理解和处理 ES6 语法却抛出语法错误?
这是我的 Package.json。我可能需要升级某些版本吗?
{
"name": "test",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.3.17",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-runtime": "^6.3.19",
"webpack": "^1.12.9"
},
"dependencies": {
"bootstrap": "^3.3.7",
"chart.js": "^2.4.0",
"fixed-data-table": "^0.6.0",
"jquery": "^3.1.0",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"vis": "^4.17.0"
},
"description": ""
}
我需要 babel 预设向后兼容 ES7。
解决者:
npm install babel-preset-stage-0 --save-dev
接着在上面的webpack config中加入preset:
presets: ['es2015', 'react', 'stage-0']