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