Javascript 导出CreateJS库资产以与require.js一起使用_Javascript_Requirejs_Assets_Createjs

Javascript 导出CreateJS库资产以与require.js一起使用

javascript requirejs

Javascript 导出CreateJS库资产以与require.js一起使用,javascript,requirejs,assets,createjs,Javascript,Requirejs,Assets,Createjs,我试图使用从Flash IDE导出的CreateJS资源（vector、movieclips等），但我们使用require.js来管理js代码，因此导出的lib-js无法直接兼容require.js 有没有人知道要对导出的JS做什么更改以使其适应require.JS？以下是此类导出JS代码的示例： (function(lib, img, cjs) { var p; // shortcut to reference prototypes // stage content:

我试图使用从Flash IDE导出的CreateJS资源（vector、movieclips等），但我们使用require.js来管理js代码，因此导出的lib-js无法直接兼容require.js

有没有人知道要对导出的JS做什么更改以使其适应require.JS？以下是此类导出JS代码的示例：

(function(lib, img, cjs)
{

    var p; // shortcut to reference prototypes

    // stage content:
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols:
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s("rgba(215,254,255,0.741)").ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            "rgba(149,235,252,0)", "rgba(149,235,252,0.102)", "rgba(149,235,252,0.451)", "rgba(145,173,255,0.576)",
            "rgba(67,170,233,0.851)"
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", "rgba(189,238,250,0.137)"], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", "rgba(189,238,250,0.251)"], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);


    (lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY: 0.4, skewX: 3.3}, 11).to({skewX: -3.1}, 24).to({scaleY: 0.4, skewX: 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);

})(lib = lib || {}, images = images || {}, createjs = createjs || {});
var lib, images, createjs;

。。。你看，这相当混乱

好的，下面是我得到的：

正如我从你的代码中所理解的那样，你想展示你的

lib

var

下面是一个关于RequireJs的基本示例：

index.html

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="stage"></div>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

以及您的模块：

define(['createJs'], function(cjs) {

//(function(lib, img, cjs)
//{
var lib = lib || {};
    var p;  //shortcut to reference prototypes

    // stage content
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s(rgba(215,254,255,0.741)).ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            rgba(149,235,252,0), rgba(149,235,252,0.102), rgba(149,235,252,0.451), rgba(145,173,255,0.576),
            rgba(67,170,233,0.851)
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", rgba(189,238,250,0.137)], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", rgba(189,238,250,0.251)], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);

    // MovieClip is UNDEFINED HERE!!!
    /*(lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY : 0.4, skewX : 3.3}, 11).to({skewX : -3.1}, 24).to({scaleY : 0.4, skewX : 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);*/

//})(lib = lib || {}, images = images || {}, createjs = createjs || {});
//var lib, images, createjs;
return lib;
});

如您所见，您只需将模块包装在

define

callback中，然后

return

返回所需的所有内容

而且，createjsfrom似乎不仅仅是lib，这在这里是必需的，因为它不包含MovieClip类，所以我暂时将其注释掉。如果您可以clearafy，即您正在使用的libs，那么我可以修复一个示例。

createjs初始化后的movieclip加载~

main.js

require.config({
    paths : {
        createJs : '//code.createjs.com/createjs-2013.12.12.min'
    },
    shim : {
            createJs : {exports: 'createjs'},
            movieclip: {
                deps: ['createJs'],
                exports: 'movieclip'
            }
    }
});

require(['./myModule'], function(myModule) {
    console.log(myModule);
});

lib.js

define(['createJs', 'movieclip'], function(cjs, movieclip) {

//(function(lib, img, cjs)
//{
var lib = lib || {};
    var p;  //shortcut to reference prototypes

    // stage content
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s(rgba(215,254,255,0.741)).ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            rgba(149,235,252,0), rgba(149,235,252,0.102), rgba(149,235,252,0.451), rgba(145,173,255,0.576),
            rgba(67,170,233,0.851)
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", rgba(189,238,250,0.137)], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", rgba(189,238,250,0.251)], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);

    (lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY : 0.4, skewX : 3.3}, 11).to({skewX : -3.1}, 24).to({scaleY : 0.4, skewX : 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);

//})(lib = lib || {}, images = images || {}, createjs = createjs || {});
//var lib, images, createjs;
return lib;
});

应该准确导出哪些变量或属性？

define(['createJs', 'movieclip'], function(cjs, movieclip) {

//(function(lib, img, cjs)
//{
var lib = lib || {};
    var p;  //shortcut to reference prototypes

    // stage content
    (lib.Lib = function()
    {
        this.initialize();

        // Layer 1
        this.background = new lib.Background();
        this.background.setTransform(320, 240, 1, 1, 0, 0, 0, 320, 240);

        this.addChild(this.background);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    // symbols
    (lib.background = function()
    {
        this.initialize(img.background);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 320, 480);


    (lib.flashlogo = function()
    {
        this.initialize(img.flashlogo);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0, 0, 894, 894);


    (lib.Background = function()
    {
        this.initialize();

        // Layer 1
        this.instance = new lib.background();
        this.instance.setTransform(640, 0, 1, 1, 0, 0, 180);

        this.instance_1 = new lib.background();

        this.addChild(this.instance_1, this.instance);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(0, 0, 640, 480);


    (lib.BubbleVector = function()
    {
        this.initialize();

        // Layer 1
        this.shape = new cjs.Shape();
        this.shape.graphics.f().s(rgba(215,254,255,0.741)).ss(8.7, 1, 1).p("EArYgrXQR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+Qx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+g");

        this.shape_1 = new cjs.Shape();
        this.shape_1.graphics.rf([
            rgba(149,235,252,0), rgba(149,235,252,0.102), rgba(149,235,252,0.451), rgba(145,173,255,0.576),
            rgba(67,170,233,0.851)
        ], [
            0, 0.357, 0.745, 0.922, 1
        ], -0.2, -0.1, 0, -0.2, -0.1, 389.2).s().p("EgrXArYQx+x+AA5aQAA5ZR+x+QR+x+ZZAAQZaAAR+R+QR+R+AAZZQAAZax+R+Qx+R+5aAAQ5ZAAx+x+gAOgNzQhWBXAAB7QAAB7BWBWQBYBYB7gBQB6ABBXhYQBXhWAAh7QAAh7hXhXQhXhXh6ABQh7gBhYBXgA2k2IQg3A4AABOQAABPA3A3QA5A4BOABQBPgBA3g4QA4g3AAhPQAAhOg4g4Qg3g4hPAAQhOAAg5A4g");

        this.shape_2 = new cjs.Shape();
        this.shape_2.graphics.rf(["#FFEBFC", rgba(189,238,250,0.137)], [
            0.42, 1
        ], 0, 0, 0, 0, 0, 31.5).s().p("AjRDQQhWhWAAh6QAAh5BWhXQBYhXB5AAQB6AABXBXQBXBXAAB5QAAB6hXBWQhXBYh6AAQh5AAhYhYg");
        this.shape_2.setTransform(113.9, 109.4);

        this.shape_3 = new cjs.Shape();
        this.shape_3.graphics.rf(["#FFEBFC", rgba(189,238,250,0.251)], [
            0.455, 1
        ], 0, 0, 0, 0, 0, 20.2).s().p("AiFCFQg4g3ABhOQgBhNA4g4QA4g4BNAAQBOAAA4A4QA3A4AABNQAABOg3A3Qg4A4hOABQhNgBg4g4g");
        this.shape_3.setTransform(-131, -128.2);

        this.addChild(this.shape_3, this.shape_2, this.shape_1, this.shape);
    }).prototype = p = new cjs.Container();
    p.nominalBounds = new cjs.Rectangle(-392.6, -392.6, 785.3, 785.3);

    (lib.Bubble = function(mode, startPosition, loop)
    {
        this.initialize(mode, startPosition, loop, {});

        // Layer 1
        this.instance = new lib.BubbleVector();
        this.instance.setTransform(0, 0, 0.4, 0.4);

        this.timeline.addTween(cjs.Tween.get(this.instance).to({scaleY : 0.4, skewX : 3.3}, 11).to({skewX : -3.1}, 24).to({scaleY : 0.4, skewX : 0}, 12).wait(1));

    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-157, -157, 314.1, 314.1);

//})(lib = lib || {}, images = images || {}, createjs = createjs || {});
//var lib, images, createjs;
return lib;
});