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兼容模块，该模块可用作独立依赖项，也可用于其他填充程序的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 });

推荐：official documentation regarding shim

NB。此外，没有必要为jQuery配置shim，它已经与AMD兼容。

Answer 2

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

但是使用requirejs的出口没有任何影响，我不明白。那应该在全球范围内输出PIXI值，它应该做什么，哪些不起作用。

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

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

Loader requireJs不尊重依赖关系

2 个答案: