gulp babel，未定义导出

Posted 2023-02-22

【中文标题】gulp babel，未定义导出

【英文标题】：gulp babel, exports is not defined

【发布时间】：2016-01-22 12:56:43

【问题描述】：

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

 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;

抛出同样的错误。 想法？

【问题讨论】：

在浏览器控制台中？浏览器不支持 CommonJS 模块。 Babel 默认将 ES6 模块转换为 CommonJS 模块。

这并不能帮助我理解为什么我会收到错误，如果我使用这个已编译的脚本然后将它放在网页上并运行页面 chrome 仍然会给我同样的错误 Oo我错过了什么

“这并不能帮助我理解为什么会出现错误” 有什么不明白的地方？ Babel 编译为 CommonJS 模块，浏览器不支持 CommonJS 模块。这就是您收到错误的原因。 CommonJS 模块主要用于 Node.js。

刚接触 ES6 转译器的人（包括我在内）的印象是，这个工具 (gulp/webpack) 将独自完成这项工作。我突然意识到那不是真的。尽管我知道 CommonJS 模块在浏览器中不起作用，但我认为 babel 应该负责处理它。但看起来 babel 适用于大多数 es6，但不适用于模块。同样只使用 gulp 也无济于事。我有一些东西可以使用 webpack，但我试图替换它，因为它不适用于服务器端代码。但显然即使我使用 gulp，我也必须使用从 gulp 调用 webpack。叹息！

@FelixKling 这不是一个有用的评论。显然，我们希望能够使用 CommonJS 模块并将它们转换为 ES5，以便浏览器能够理解它们。您从问题中不明白什么？

【参考方案1】：

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

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

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

【讨论】：

Webpack 2（测试版，但完全可用）同时进行编译和浏览器化，因此 export 语句将在浏览器中工作。