如何导入系统js SFX库 [英] How to import system js SFX library

问题描述

我已经将几个js文件编译成一个SFX，如 https：/中所述/github.com/systemjs/builder#example---common-bundles （尽管使用'+'代替'&'，但这部分似乎正在运行）：

I've compiled several js files into one SFX as described in https://github.com/systemjs/builder#example---common-bundles (although using '+' instead of '&', but this part seems to be working):

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：

but when i'm trying to import resulting js file I can't find any 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中：

The only solution I found so far was to use sfxGlobalName and create 'special' js file containing references to all other files to be included and then include it into 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：

index.html:

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

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

然后可以访问导入的对象，如

then imported objects can be accessed like

elements.myTest

gulp：

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上：

The sample app is on 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.import API导入sfx包，因为您尝试导入的模块已经编译，这意味着它是根据所选的包装格式（es6，cjs，amd）。尝试导入已编译的cjs文件时会看到相同的行为（例如，通过Browserify）。

You can not import the sfx bundle via System.import API as the module you are trying to import is already compiled, meaning it is wrapped according to the chosen format (es6, cjs, amd). Same behavior you will see when trying to import a compiled cjs file (eg. Through Browserify).

为了能够导入模块，你应该更好地捆绑它们而不用SFX。

To be able to import the modules, you should better bundle them whithout SFX.

这篇关于如何导入系统js SFX库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！