无法将 es6 模块与 webpack 一起使用

Question

尝试在 webpack 中使用带有 babel loader 的 es6 模块时出现错误。它适用于require，但不适用于import。

如果我这样做：

foo = require( './app/data.js'); //it works 

但是

import foo from './app/data.js'; //gives me a syntax error: 

: Module parse failed Line 1: Unexpected token You may need an appropriate loader to handle this file type.

loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },

路径：

webpack 配置 /app/main.js

"devDependencies": {
    "babel-core": "^6.1.20",
    "autoprefixer-loader": "^3.1.0",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.1.2",
    "css-loader": "^0.23.0",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "node-libs-browser": "^0.5.2",
    "style-loader": "^0.13.0",
    "webpack": "^1.10.0",
    "webpack-dev-server": "^1.10.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.1.19"
  }

Answer 1

看来 babel 没有参加派对。关于包含import foo from 'data'; 语句的文件的检查事项：

1. 检查文件是否在src 目录下。
2. 检查文件扩展名是否为.js。

附带说明... ES6 相当于：

foo = require( './data');

会的，

import foo from './data';
                 ^^