Gulp Babel，exports未定义。

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;

抛出相同的错误。 有什么想法吗？

- TheWebs

---

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

那并不能帮助我理解为什么如果我将编译后的脚本放在网页上并运行页面，Chrome仍然会给出相同的错误Oo，我错过了什么？ - TheWebs

“那并不能帮助我理解为什么我会出现错误。”有什么不理解的呢？Babel编译成了CommonJS模块，而浏览器不支持CommonJS模块。这就是你出现错误的原因。CommonJS模块主要用于Node.js中。 - Felix Kling

对于刚开始接触ES6转译工具的人（包括我），往往会认为一个工具（gulp/webpack）就可以全部解决。但是现在我意识到这并不正确。虽然我知道CommonJS模块不能在浏览器中使用，但我认为babel应该会处理这个问题。但事实证明，babel可以处理大部分es6，但不能处理模块。而且仅使用gulp也没有帮助。我之前使用webpack做到了一些东西，但因为它与服务器端代码兼容性不好，所以我试图替换它。但显然，即使我使用gulp，也需要从gulp调用webpack。唉！ - Jayesh

@FelixKling 这并不是一个有帮助的评论。 显然，我们想要能够使用CommonJS模块并将它们转译为ES5，以便浏览器能够理解它们。 你从问题中没有理解到什么？ - AlxVallejo

Answer 1

这实际上不是Babel的问题，你只是想在浏览器中运行从ES6 export转译而来的CommonJS代码。在浏览器中无法运行CommonJS，你需要使用一种工具将其打包为适用于浏览器的代码，例如Webpack或Browserify。

恰好这个星期我在Github上创建了一个小项目，展示了Gulp + ES6代码（使用export）+ Babel + Webpack的设置：gulp-es6-webpack-example。

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

- Tiago Romero Garcia

---

Webpack 2（尽管仍在测试阶段，但已经可以完美使用）同时进行转译和浏览器化，因此export语句将在浏览器中正常工作。 - Dan Dascalescu

Answer 2

我修复了它，只需将gulp-typescript包的设置中设置为se6：

import gulp from 'gulp';
import ts from 'gulp-typescript';
import uglify from 'gulp-uglify';
import browserSync from 'browser-sync';



export const scripts = () => {
    return gulp.src(['app/scripts/*', '!app/scripts/modules/'])
    .pipe(ts({
        noImplicitAny: true,
        target: "es6" // <<< THIS
    }))
    .pipe(uglify()) 
    .pipe(gulp.dest('dist/scripts/'))
    .pipe(browserSync.stream())
}

此外，您需要在 HTML 中设置type="module"以连接您的 JS 文件。 <script type="module" src="scripts/index.js"></script>

- gureenkov56