gulp babel，导出未定义

Question

考虑以下示例代码（也许我做错了？）

 var FlareCurrency = {

 };

export {FlareCurrency};

我有以下任务：

gulp.task("compile:add-new-currency-minified", function(){
  return gulp.src('src/add-new-currency/**/*.js')
             .pipe(babel())
             .pipe(concat('Flare-AddNewCurrency.js'))
             .pipe(uglify({"preserveComments": "all"}))
             .pipe(gulp.dest('dist/minified/'));
});

当我运行时，我得到以下信息：

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FlareCurrency={};exports.FlareCurrency=FlareCurrency;

为了好玩，我想在控制台中运行它，是的，我知道它什么都不做，但我没想到会看到这个：

Uncaught ReferenceError: exports is not defined(…)

非缩小版：

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var FlareCurrency = {};

exports.FlareCurrency = FlareCurrency;

抛出同样的错误。 想法？

Answer 1

这实际上不是 babel 问题，您只是在没有准备的情况下尝试在浏览器中运行 CommonJS 代码（从 ES6 export 转译）。 CommonJS在浏览器上是没有运行的，需要用工具给浏览器打包，比如Webpack or Browserify。

本周巧合的是，我在 Github 上创建了一个小项目，其中显示了 Gulp + ES6 代码（使用 export）+ Babel + Webpack 的设置：gulp-es6-webpack-example.

在我的示例中，您可以同步（预加载）或异步（延迟加载）在浏览器上加载 JS 代码。

gulp babel，导出未定义

gulp babel, exports is not defined

javascript

ecmascript-5

ecmascript-6

gulp

babeljs