JSPM Builder:如何依赖其他模块?

时间:2016-08-19 21:46:36

标签: javascript systemjs jspm build-tools

我使用TypeScript编译器为JSPM Build配置了以下配置:

var Builder = require('jspm').Builder;

var builder = new Builder('.');
    builder.reset();

builder.loadConfig('./jspm.conf.js')
    .then(function() {

        builder.config({
            defaultJSExtensions: false,
            transpiler: "typescript",
            typescriptOptions: {
                "module": "system",
                "experimentalDecorators": true,
                "resolveAmbientRefs": true
            },
            packages: {
                "source": {
                    "main": "app/index",
                    "defaultExtension": "ts",
                    "meta": {
                        "*.ts": {
                            "loader": "ts"
                        },
                        "*.css": {
                            "loader": "css"
                        }
                    }
                }
            },
            packageConfigPaths: [
                "npm:@*/*.json",
                "npm:*.json",
                "github:*/*.json"
            ],
            meta: {
                "three": {
                    "format": "global",
                    "exports": "THREE"
                },
                "three-firstpersoncontrols": {
                    "deps": "three"
                }
            },
            map: {
                "three": "github:mrdoob/three.js@r79/build/three.js",
                "three-firstpersoncontrols": "github:mrdoob/three.js@r79/examples/js/controls/FirstPersonControls.js"
            }
        });

        var promises = new Array();

        promises.push(builder.buildStatic('source', './build/js/app.min.js', {
            sourceMaps: false,
            minify: true,
            mangle: false
        }));

        return Promise.all(promises);
    })
    .then(function() {
        cb();
    })
    .catch(function(err) {
        console.log('Build Failed. Error Message: ', err);
    });

我正在尝试使用THREE.js库以及包含例如...的功能的单独文件FirstPersonControls。路径在map部分中定义,这些都可以正常工作。

捆绑后,我收到THREE.FirstPersonControls is not a contructor的消息。我的猜测到目前为止,单独的模块three-firstpersoncontrols不依赖于全局THREE变量,因此无法调用构造函数THREE.FirstPersonControls

所以我的问题变成了:

如何让这些单独的模块依赖于构建中的全局THREE模块?

1 个答案:

答案 0 :(得分:0)

过了一会儿,我发现问题在于这个部分:

typescriptOptions: {
    "module": "system", // <-- THIS LINE
    "experimentalDecorators": true,
    "resolveAmbientRefs": true
}

我必须将模块格式从system更改为amd才能正常工作,所以现在配置已经变为:

typescriptOptions: {
    "module": "amd",
    "experimentalDecorators": true,
    "resolveAmbientRefs": true
}

希望有这个问题的其他人都可以使用这个答案。