Javascript webpack + babel - 反应，意外的标记“导入”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36389468/
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 + babel - react, unexpected token 'import'
提问by Henrik
I'm trying to make index.jswork with es2015.
我正在尝试使index.js与 es2015 一起工作。
Before directing me to .babelrc, note that I haveadded BOTH es2015 and react (to be sure, but there's no react here).
在将我引导到 .babelrc 之前，请注意我已经添加了两个 es2015 和 react（可以肯定，但这里没有反应）。
It features
它的特点
import { default as Logary, Targets, getLogger, build } from 'logary';
And here's .babelrc:
这是 .babelrc：
{
"presets": ['es2015', 'react']
}
And webpack.config.js
和 webpack.config.js
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
path = require('path');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client?reload=true',
'./index.js'
],
output: {
path: path.resolve('./dist'),
filename: '[name].js',
publicPath: '/'
},
loaders: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
{ test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
{ test: /\.svg$/, loader: "file" }
],
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.template.html'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
resolve: {
extensions: ['', '.js']
}
}
Gives error:
给出错误：
ERROR in ./index.js
Module parse failed: /Users/h/logary-js/examples/webpack/index.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { default as Logary, Targets, getLogger, build } from 'logary';
|
| // once per site/app
Why is it not handling the import-token?
为什么它不处理导入令牌？
采纳答案by yurzui
Your webpack.config.js structure is not correct. Webpack doesn't recognize all your loaders. Specifically, you need to put the loaders property inside of a module section like this:
您的 webpack.config.js 结构不正确。Webpack 无法识别您的所有加载程序。具体来说，您需要将 loaders 属性放在模块部分中，如下所示：
module: {
loaders: [
{ test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
{ test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
{ test: /\.svg$/, loader: "file" }
],
}
