web-dev-qa-db-ja.com

gulp babel、輸出は定義されていません

次のサンプルコードを考えてみてください（そして、間違っているのかもしれません）。

 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;

同じエラーをスローします。 アイデア？

javascriptgulpecmascript-6babeljsecmascript-5
40
TheWebs

これは実際にはバベルの問題ではありません。ブラウザでCommonJSコード（ES6 exportから変換されたもの）を準備せずに実行しようとしているだけです。 CommonJSはブラウザ上では実行されません。ブラウザ用にパッケージ化するツールを使用する必要があります。たとえば、 Webpack または Browserify です。

偶然にも今週、GithubでGulp + ES6コード（exportを使用）+ Babel + Webpackのセットアップを示す小さなプロジェクトを作成しました： gulp-es6-webpack-example 。

私の例では、ブラウザーにJSコードを同期（プリロード）または非同期（遅延ロード）でロードできます。

43
Tiago Romero Garcia