使用Gulp、webpack-stream与Vue时出现Unexpected token export错误求助

这个错误的核心原因很明确：你的webpack配置没有将ES6+的模块语法（比如export）转译为浏览器兼容的ES5代码，导致浏览器无法识别export default这类语法。另外你的webpack配置写法也有小问题，咱们一步步来修复：

1. 安装必要的依赖包 #

首先确保你已经安装了处理ES6转译和Vue文件的必要工具：

npm install --save-dev babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler

• babel-loader + @babel/core + @babel/preset-env：负责把ES6+代码转成浏览器兼容的ES5
• vue-loader + vue-template-compiler：负责处理Vue的单文件组件（.vue文件）以及模板编译

2. 修正Gulp的webpack-stream配置 #

你之前的配置里用了module.exports = {}，这是Node.js里导出模块的写法，在webpack-stream的参数里直接传配置对象就行。同时要添加module.rules来配置loader：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 记得引入vue-loader的插件

gulp.task('js', function () {
  return gulp.src('./src/js/main.js')
    .pipe(webpackStream({
      output: { filename: 'bundle.js' },
      resolve: {
        alias: { 
          "vue$": "vue/dist/vue.esm.js" // Vue 2的ES模块版本，若用Vue 3需改为"vue/dist/vue.esm-browser.js"
        },
        modules: [path.join(__dirname, "../node_modules")]
      },
      module: {
        rules: [
          // 处理JS文件，用babel转译
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
          },
          // 处理Vue单文件组件
          {
            test: /\.vue$/,
            use: 'vue-loader'
          }
        ]
      },
      plugins: [
        new VueLoaderPlugin() // 必须添加这个插件，vue-loader才能正常工作
      ]
    }))
    .on('error', function handleError() {
      this.emit('end'); // 错误后继续执行任务
    })
    .pipe(gulp.dest('./js/'));
});

3. 添加Babel配置文件 #

在项目根目录创建.babelrc文件，配置@babel/preset-env：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ]
}

这个配置会根据你指定的浏览器目标，自动把ES6+代码转成对应的兼容ES5代码。

错误原因复盘 #

你之前的webpack配置只定义了输出和路径别名，没有配置任何loader来处理JS文件的转译。webpack默认只会做模块打包，不会自动转译ES6+语法，所以打包后的代码里还保留了export关键字，而很多旧浏览器或环境不支持原生ES模块语法，就会抛出这个语法错误。

内容的提问来源于stack exchange，提问作者Hello World