javascript - 加载器 requireJs 不尊重依赖关系

Question

我使用 requireJs 加载我的 javascript 文件。 我导入了库 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 兼容模块，可以用作独立的依赖项，也可以在其他垫片的 deps 部分中使用。

编辑:

看了你的评论好像这个“pixi_extends”模块是你自己的代码；您不应该填充您自己的模块，它仅用于遗留的非 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 兼容。