加载器 requireJs 不尊重依赖关系

Question

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

Bundle也是一样，pixi也是一样的错误。

我不明白，我认为我正确地做了“deps”！

loader-index.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 兼容模块，它可以用作独立依赖项，也可以在其他 shim 的 deps 部分中使用。

编辑：

阅读您的 cmets 似乎这个“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
});

推荐：official documentation regarding shim

---

注意。另外，不需要为 jQuery 配置 shim，它已经兼容 AMD。

Answer 2

我通过在 pixi_extends 中使用 require() 函数并从官方 pixi.js 库中删除我的更改来修复它。现在可以了。

但是用 requirejs 导出没有任何效果，我不明白。那应该在全局中导出 PIXI 值，这是应该做的，但不起作用。

加载所有内容后，我可以手动导出它，如果我想将 PIXI 设为全局，这是一个解决方案。但我不是绝对需要它，所以我会保持这种方式。

但我想了解为什么“垫片导出”不起作用。