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

【问题标题】：using webpack-stream & gulp does not transpile ES6 import使用 webpack-stream & gulp 不会转译 ES6 导入
【发布时间】：2017-06-25 10:29:04
【问题描述】：

我正在尝试将 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"]
}

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

【问题讨论】：

您是否在网络浏览器中使用bundle.js？
@Xotic750 是的，这就是我在控制台中收到 Unexpected token import 错误的原因
所以当你查看你的bundle.js 时（我们看不到这个内容，因为它没有发布）是否发生了任何转译？
@Xotic750 我可以在bundle.js 的顶部看到webpack 代码，但不，我认为没有转译，因为在底部我可以看到import sum from './sum';
所以 babel-loader 因为 v7 放弃了对 webpack v1 的支持，但 webpack-stream 正在使用 webpack v1（它不支持 v1 以外的任何东西）

标签： javascript webpack gulp babeljs

【解决方案1】：

依赖版本问题。

babel-loader

v7.0.0 @danez danez 于 4 月 21 日发布 · 13 次提交给 master 从这个版本开始

:boom: 重大变化

放弃对节点的支持

放弃对 webpack 1 的支持

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

webpack 流

“依赖”：{“webpack”：“^1.12.9”}

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

【讨论】：