gulp babel，未定义导出

问题描述

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

Consider the following example code (and maybe I am doing it wrong?)

 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/'));
});

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

When I run this I get the following:

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

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

For the fun of it, I wanted to run it in the console, yes I know it does nothing but I didn't expect to see this:

Uncaught ReferenceError: exports is not defined(…)

非缩小版:

"use strict";

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

exports.FlareCurrency = FlareCurrency;

抛出同样的错误.想法?

推荐答案

这实际上不是 babel 问题，您只是尝试在浏览器中运行 CommonJS 代码(从 ES6 export 转译)准备.CommonJS 不在浏览器上运行，需要使用工具为浏览器打包，例如 Webpack 或 浏览器.

That is not actually a babel issue, you are just trying to run CommonJS code (transpiled from ES6 export) in the browser without preparation. CommonJS doesn't run on the browser, you need to use a tool to package it for the browser, such as Webpack or Browserify.

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

Just by coincidence this week I created a small project on Github that shows a setup of Gulp + ES6 code (using export) + Babel + Webpack: gulp-es6-webpack-example.

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

In my example you can load JS code on the browser either synchronously (pre-loaded) or asynchronously (lazy-loaded).

这篇关于gulp babel，未定义导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！