webpack + babel - 反应，意外的令牌“导入”答案

【问题标题】：webpack + babel - react, unexpected token 'import'webpack + babel - 反应，意外的令牌“导入”
【发布时间】：2016-04-03 18:34:36
【问题描述】：

我正在尝试使 index.js 与 es2015 一起使用。

在将我引导至 .babelrc 之前，请注意我已添加了 es2015 和 react（可以肯定，但这里没有反应）。

它的特点

import { default as Logary, Targets, getLogger, build } from 'logary';

这里是 .babelrc：

{
  "presets": ['es2015', 'react']
}

还有 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']
  }
}

给出错误：

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

为什么不处理导入令牌？

【问题讨论】：

@Henrik - 你可以尝试将你的 JavaScript 加载器更改为 babel 吗？
我也遇到了这个问题，必须在导入中包含文件扩展名； import {...} from './logary.js'
@Daniel_L import 关键字不需要文件扩展名。
@MichaelParker 这是我使用.jsx 文件的时候
@Daniel_L 如果你浏览 packages.json 你会看到我有一个本地包引用到存储库根目录中的包；旨在忠实于我正在构建一个库并希望展示它是如何使用的这一事实。所以恐怕这不是答案。

标签： javascript webpack babeljs

【解决方案1】：

您的 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" }
  ],
}

【讨论】：

好极了，多么挑剔:)