加载器要求Js不尊重依赖关系

Question

我使用requireJs来加载我的javascript文件。我导入了lib pixi.js和pixi_extends.js，但pixi_eExtends生成了一个错误，因为pixi未定义。。。我不明白，因为pixi_extends应该等待pixi.js上传后再运行。

这和Bundle是一样的，关于pixi也是一样的错误。

我不明白，我想我做的"deps"是正确的！

加载程序索引ts：（我使用TypeScript！）

/// <reference path="../def/require.d.ts" />
/// <reference path="Init.class.ts" />
/**
 * paths    List of the files to load. (Cannot contains references TS classes)
 *              key: New reference name of the file.
 *              path: Relative path to /public/js/ of the file.
 *
 * shim     Config about the libraries (dependencies and more).
 *          See http://requirejs.org/docs/api.html#config-shim
 */
require.config({
    //urlArgs: "t=" +  (new Date()).getTime(),
    //baseUrl: "../",
    paths: {
        /*
         ******** Load libraries ********
         */
        // Lib - jQuery
        'jquery': '../generated/lib/jquery-1.10.2.min',
        'jqueryUiCore': '../generated/lib/jquery.ui.core.min',
        'jqueryUiEffect': '../generated/lib/jquery.ui.effect.min',
        // Lib - Javascript extends
        'class': '../generated/lib/class.min',
        // Lib - Pixi
        'pixi': '../generated/lib/pixi.min',
        'pixiExtends': '../generated/lib/pixi_extends.min',
        // Lib - Socket
        'socketIo': '../generated/lib/socket.io.min',
        // Lib - Pomelo
        'pomeloclient': '../generated/lib/pomeloclient.min',
        // Lib - Path finder
        'aStar': '../generated/lib/AStar.min',
        /*
         ******** Load shared source code ********
         */
        'Message': '../generated/shared/Message.min',
        'ValidatorMessage': '../generated/shared/ValidatorMessage.min',
        /*
         ******** Load other scripts ********
         */
        'bundle': '../generated/bundle.min'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'jqueryUiCore': {
            deps: ["jquery"],
            exports: '$'
        },
        'jqueryUiEffect': {
            deps: ["jquery"],
            exports: "$"
        },
        'pixiExtends': {
            deps: ["jquery", "pixi"]
        },
        'pomeloclient': {
            deps: ["socketIo"]
        },
        'ValidatorMessage': {
            deps: ["Message"]
        },
        'bundle': {
            deps: ["pixi", "pixiExtends", "pomeloclient"]
        }
    }
});

/**
 * [] Array of name that should be the same than those defined in the config.paths. Exception for the TS classes with reference in this file.
 */
require(
    [
        'Init.class',
        'jquery', 'jqueryUiCore', 'jqueryUiEffect',
        'class',
        'pixi', 'pixiExtends',
        'socketIo', 'pomeloclient',
        'aStar',
        'Message', 'ValidatorMessage',
        'bundle'
    ],
    (
        _init,
         $, jqueryUiCore, jqueryUiEffect,
         _class,
         _pixi, pixiExtends,
         _socketIo, _pomeloclient,
         _aStar,
         _message, _validatorMessage,
         _bundle
    )
    => {
        // Initialization.
        var init = new _init.Init();
        // Make shared source classes public, to help.
        _exports([
            _message.Message,
            _validatorMessage.ValidatorMessage
        ]);

        /**
         * Export an array of object to made them public on the browser.
         * @param   objects - Array of objects. Class of function basically.
         * @private
         */
        function _exports(objects){
            for(var i in objects){
                _export(objects[i]);
            }
        }
        /**
         *Export an object to the browser to make it public.
         * @param o     Object to export.
         * @param name  Customise the name. Optional.
         * @private
         */
        function _export(o: any, name: any = ''){
            if(!name){
                name = o.name;
            }
            window[name] = o;
        }
    }
);

Answer 1

在shim部分中添加以下条目就足够了：

'pixi': {
  exports: 'PIXI'
}

这将该库转换为AMD兼容模块，该模块可以用作独立的依赖项，也可以在其他垫片的deps部分中使用。

编辑：

阅读您的评论，这个"pixi_extends"模块似乎是您自己的代码；您不是应该shim您自己的模块，它只用于遗留的非AMD库。如果你想通过定制来增强Pixi，可以这样做：

define(['pixi'], function (ThePixiObject) {
  ThePixiObject.customFunction = function () {
    console.log('Pixi now has customFunction()');
  }
  // no need to return anything - we're only interested in the side-effect above
});

推荐：关于垫片的官方文件

---

注意。此外，不需要为jQuery配置垫片，它已经与AMD兼容了

Answer 2

我使用pixi_extends中的require（）函数修复了它，并从官方的pixi.js库中删除了我的更改。现在这就行了。

但requirejs的出口没有任何影响，我不明白。这应该在全球范围内出口PIXI值，这是应该做的，但这不起作用。

一旦加载了所有内容，我就可以手动导出它，如果我想让PIXI成为全局的，这是一个解决方案。但我并不是绝对需要它，所以我会一直这样。

但我想了解为什么"垫片出口"不起作用。