3

https://github.com/systemjs/builder#example---common-bundlesで説明されているように、いくつかの js ファイルを 1 つの SFX にコンパイルしました(「&」の代わりに「+」を使用していますが、この部分は働く):

gulp.task('systemjs', ['copy-assets'], function(done){
  return new Builder({
    baseURL: '.',

    // opt in to Babel for transpiling over Traceur
    transpiler: 'traceur'

    // etc. any SystemJS config
  }).buildSFX('src/elements/my-test.js + src/elements/my-test2.js + src/elements/model/user.js', 'dist/elements.js')

      .then(function() {
        console.log('Build complete');

  }).catch(function(err) {
        console.log('Build error');
        console.log(err);
    });

});

しかし、結果のjsファイルをインポートしようとすると、libが見つかりません:

<script src="./bower_components/system.js/dist/system-csp-production.js"></script>

<script>

    System.import('elements.js').then(function(m) {
        console.log(m);//never invoked
    });
</script>

どんな助けでも大歓迎です!

アップデート:

これまでに見つけた唯一の解決策は、sfxGlobalName を使用して、含める他のすべてのファイルへの参照を含む「特別な」js ファイルを作成し、それを html に含めることでした。

all.js:

 import {MyTest} from 'src/elements/my-test.js';
    export var myTest = MyTest;
    
    import {MyTest2} from 'src/elements/my-test2.js';
    export var myTest2 = MyTest2;

index.html:

 <script src="./bower_components/system.js/dist/system-polyfills.js"></script>

<script src="elements.js"></script>

次に、インポートされたオブジェクトに次のようにアクセスできます

elements.myTest

一口:

gulp.task('systemjs', ['copy-assets'], function(done){
  return new Builder({
    baseURL: '.',

    // opt in to Babel for transpiling over Traceur
    transpiler: 'traceur'

    // etc. any SystemJS config
  }).buildSFX('src/elements/all.js', 'dist/elements.js', { sfxGlobalName: 'elements', minify: false, sourceMaps:false })

      .then(function() {
        console.log('Build complete');

  }).catch(function(err) {
        console.log('Build error');
        console.log(err);
    });

});

もっと良い方法はありますか?

サンプル アプリは github にあります。

git clone https://github.com/bushuyev/test_test.git
cd test_test
git checkout tags/1.0
npm install
bower install
gulp wct
4

1 に答える 1

1

インポートしようとしているモジュールはすでにコンパイルされているため、System.import API を介して sfx バンドルをインポートすることはできません。つまり、選択した形式 (es6、cjs、amd) に従ってラップされています。コンパイル済みの cjs ファイルをインポートしようとした場合と同じ動作 (例: Browserify 経由)。

モジュールをインポートできるようにするには、SFX なしでバンドルすることをお勧めします。

于 2015-08-10T21:13:55.233 に答える