3

我已经按照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 文件时，我找不到任何库：

<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;

索引.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 回答