3

簡単な質問がありますが、どこにも行き着きません。彼は午前中ずっとグーグルで検索していました。traceur についての情報はあまりなく、少なくとも私にはそれほど明確ではありません。

traceur を使用して単一の出力ファイルをトランスパイルし、それを traceur-runtime を使用してブラウザーで使用する場合、ES6 モジュールをどのように実装する必要がありますか? インポートとエクスポートが予期しないトークンを取得し続けます。

私は gulp-traceur を使用しており、既にすべてのモジュール オプション //'commonjs' //'amd'、'commonjs'、'instantiate'、'inline'、'register' を試しました。

私が持っている1つの疑問は、私がcommonjsについての答えを見つけ続けているということですが、ES6モジュールを使用するという私の考えは、さまざまなソースを持ち、メインからそれらをインポートし、このすべての結果を1つのファイルにコンパイルすることです(私が意味するのは、ブラウザでのモジュールの非同期ロードが必要です)

これがgulpタスクです

gulp.task('scripts', function() {
      del.sync(['bin/js/main.min.js']);
      del.sync(['bin/js/main.min.js.map']);
      gulp.src(["./src/app/init.js", "./src/app/elements/circle.js", "./src/app/app.js"])
        .pipe(sourcemaps.init())
        .pipe(traceur({modules : 'inline', sourceMaps: 'inline', experimental: "true"})) //'commonjs' //'amd', 'commonjs', 'instantiate', 'inline', 'register'
          .on('error', errorParser)
        .pipe(jshint())
          .pipe(jshint.reporter('jshint-stylish'))
        .pipe(uglify({mangle: true})).on('error', errorParser)
        .pipe(concat('main.min.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('bin/js'))
        .pipe(livereload({ auto: true }));
    });

インポート時に予期しないトークンがアプリから取得される

import Circle from './elements/circle';

また

import * as Circle from './elements/circle.js';

(色々な方法を試しました)

また、エクスポート時に circle.js から

export default Circle;またはexport Circle;（いくつかの方法も試しました）

4

2 に答える 2

1

最後に、@Jeff のコメントでアドバイスされているように、Traceur を Babel に切り替えました。

だから私の解決策はBabel + Browserify + Gulpを使うことでした

私が得ていたエラーは、コードが正しく変換されていることに関するものだと思いますが、モジュールを管理できるクライアントはまだないため、モジュールを処理するには require または commonjs のようなものが必要です。コードを ES5 で理解できるコードに変換します。しかし、繰り返しになりますが、情報が不足しているため、これは明確ではありません（私は6時間以上グーグルで検索していました）

私は、ES6 モジュールの構文をブラウザーが理解できる commonjs に自動的に変換する Browserify ツール、babelify を使用します。

これは私の一日を作りました。情報が不足しているため、Traceur で Browserify を使用しても機能することを理解/推測するのに時間がかかりましたが、Babel を調べた後、Traceur よりも利点があり、特にクライアントで runtime.js が必要なく、出力より一貫性があり、肥大化が少なくなっています。

将来誰かに役立つ場合は、使用しているgulpタスクの下に貼り付けます。

gulp.task('scripts', function() {

  del.sync(['bin/js/main.min.js']);
  del.sync(['bin/js/main.min.js.map']);

  gulp.src(["./src/**/*.js", "!./src/lib/*.js"])
    .pipe(gp.jshint())
    .pipe(gp.jshint.reporter('jshint-stylish'));

  browserify({
    entries: './src/app/app.js',
    debug: true
  })
  .transform(babelify)
  .bundle().on('error', errorParser)

  .pipe(source('main.js'))
  .pipe(gulp.dest('./bin/js'))
    .pipe(gp.livereload({ auto: true }));

});

より良いアプローチがあれば教えてください。

于 2015-04-27T15:27:56.010 に答える
0

実際、ES6 モジュールをブラウザに直接ロードすることは可能です。

1) トランスパイラ ライブラリをロードする

<!-- transpiler -->
<script type="text/javascript" src="lib/traceur.js"></script>
<script type="text/javascript" src="lib/es6-module-loader.js"></script>

2）ここで使用したコード化されたモジュールをインポートしますSystem.pathsが、そうする必要はありません。直接の相対パスでインポートできます。

System.paths['gso/eonjs/*'] = 'dist/es6/gso/eonjs/*.js';

var Eon;
var MomentRecurRule;
var RRuleRecurRule;
var RecurRuleContainer;
System.import('gso/eonjs/EonJS').then( function( _exports ) {
    Eon = _exports;
    MomentRecurRule = Eon.MomentRecurRule;
    RRuleRecurRule = Eon.RRuleRecurRule;
    RecurRuleContainer = Eon.RecurRuleContainer;
});

これにより、メインの API とクラスがグローバル名前空間に残ります。

System.import()は非同期であるため、モジュールが実際にロードされる前に、コードが次の行に進みます。ロード ウィジェットは、この時点で私が推測するトリックを実行します。

完全な動作例については、 example-es6-modules.htmlを参照してください。

私は現在、歴史的な理由からのみ traceur を使用しています。私が目指しているのは、全体的にはできるだけ多くの技術を維持することです。可能な限り中立 - したがって、私は traceur を使用しましたが、traceur の使用に固執しないことを目指しています - プロジェクトは比較的簡単にバベルに切り替えることができます (戦術的にはそれが主要な原則です)。とはいえ、babel でコーディングする正当な理由はたくさんあります。私は多かれ少なかれ、これらの理由で切り替えを行うだろうと確信しています (そして、他のすべての人が完全にサポートされ、新たに作成された ES2015)。

于 2015-04-27T18:50:42.307 に答える