javascript - 使用 webpack-stream & gulp 不会转译 ES6 导入

Question

我尝试将 webpack 与 gulp 一起使用，但在浏览器控制台中收到此错误:

Uncaught SyntaxError: Unexpected token import

正如 webpack 官方文档所述 here我将 webpack-stream 与 webpack.config.js 一起使用。我的 gulpfile.js:

var gulp = require('gulp'),
    webpack = require('webpack-stream');

gulp.task('js', function() {
  return gulp.src('./src/js/index.js')
    .pipe(webpack(require('./webpack.config.js')))        
    .pipe(gulp.dest('./template/js/'));    
});

我的 webpack.config.js:

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
  },
  module: {
   rules: [{
     test: /\.js$/,
     exclude: /node_modules/,
     loader: 'babel-loader',
   }]
  },
};

index.js:

import sum from './sum';
console.log(sum(2,4));

和 sum.js

const sum = (a,b) => {
   return a + b;
}
export default sum;

这只是启动项目样板的简单测试。 我还安装了 babel-core 、babel-loader 和 babel-preset-es2015 并且我有 .babelrc文件位于我的项目文件夹的根目录

.babelrc:

{
  "presets": ["es2015"]
}

知道我在这里缺少什么吗？

Answer 1

依赖版本问题。

babel-loader

v7.0.0 @danez danez released this on 21 Apr · 13 commits to master since this release

:boom: Breaking Change

Drop support for node < 4

Drop support for webpack 1

https://github.com/babel/babel-loader/releases/tag/v7.0.0

webpack-stream

"dependencies": { "webpack": "^1.12.9" }

https://github.com/shama/webpack-stream/blob/master/package.json