如何导入system js的SFX库

How to import system js SFX library

本文关键字：js SFX system 何导入 导入      更新时间：2023-09-26

我已经将几个js文件编译成一个SFX，如https://github.com/systemjs/builder#example---common-bundles所述(虽然使用'+'而不是'&'，但这部分似乎是有效的):

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

不能通过System导入sfx包。导入API，因为您试图导入的模块已经编译，这意味着它是根据所选择的格式(es6, cjs, amd)包装的。当你尝试导入一个编译好的cjs文件时，你会看到同样的行为。通过Browserify)。

为了能够导入模块，你最好不要使用SFX来捆绑它们。

相关文章：