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

这实际上不是一个通天的问题，您只是试图在浏览器中运行CommonJS代码（从ES6 export编译而来）而没有准备。 CommonJS不在浏览器上运行，您需要使用一个工具将其打包为浏览器，例如Webpack或Browserify 。

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

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

Answer 2

我修复它只是为设置se6 gulp-typescript typescript package 设置 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()) }

此外，您必须设置type="module"以连接 html 中的 js 文件。

<script type="module" src="scripts/index.js"></script>