我按照https://github.com/systemjs/builder#example---common-bundles中的描述将几个js文件编译成一个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
答案 0 :(得分:1)
您无法通过System.import API导入sfx软件包,因为您尝试导入的模块已经编译,这意味着它将根据所选格式(es6,cjs,amd)进行包装。尝试导入已编译的cjs文件时会看到相同的行为(例如,通过Browserify)。
为了能够导入模块,你应该更好地捆绑它们而不用SFX。