别忘了，导出没有定义

gulp babel, exports is not defined

本文关键字：定义 忘了      更新时间：2023-09-26

考虑以下示例代码(也许我做错了?)

 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代码(从ES6 export编译)。CommonJS不能在浏览器上运行，你需要使用一个工具来为浏览器打包它，比如Webpack或Browserify。

本周我在Github上创建了一个小项目，展示了Gulp + ES6代码(使用export) + Babel + Webpack的设置:Gulp - ES6 - Webpack -example。

在我的例子中，你可以同步(预加载)或异步(惰性加载)在浏览器上加载JS代码。

我修复它只是设置se6为设置gulp-typescript包:

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"连接你的js文件在html。

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

相关文章：