Proper import dragonbones.js

[clifftm]

Hello. I'm baby in webdevelopment, and want to use animation, created in DragonBones Pro inside my website. So i'v downloaded pixi.js, and DragonBones.js from this repository and put them in lib folder together. Then in main.js trying to do that:

• import "./lib/pixi.js" //ver pixi.js - v4.8.1
• import "./lib/dragonBones.js" //ver 5.6.300

After that i can create:

• let cvs= document.getElementById("canvasId");
• let app = new PIXI.Application({view: canvasId});

and want to use dragonBone instance, but can't:

• console.log(dragonBones); // dragonBones is not defined
• console.log(DragonBones); // DragonBones not defined
• console.log(dragonBones.DragonBones); // dragonBones not defined
• console.log(new dragonBones()); // dragonBones not defined
• console.log(new DragonBones()); // DragonBones is not defined
• console.log(PIXI.dragonBones.DragonBones); // not defined

the same results if importing that way:

• import {dragonBones} from "./lib/dragonBones.js" //ver 5.6.300
• import {dragonBones as DragonBones} from "./lib/dragonBones.js" //ver 5.6.300
• *import as dragonBones from "./lib/dragonBones.js" //ver 5.6.300**

also i tried like this let db = require("./lib/dragonBones.js") console.log(db); // returns empty object {}

i looked in Spine2d.js sources and they do in IIFE PIXI.spine = pixi_spine; to incapsulate to PIXI namespace and use PIXI.spine.Spine(...), but there is no such way in DragonBones.

I tried to install it like you wrote:

• npm install -g dragonbones-runtime
• dbr pixijs@4.6.2 and put that files to lib, but again can't import use it

2 ways i found for fix, but both are bad in my opinion:

• add exports.dragonBones = dragonBones; at the end of dragonBones.js
• or npm i dragonbones-pixi from (https://www.npmjs.com/package/dragonbones-pixi) I don't know if the publisher is official dragonbone developer, but an export is already exists in the end of the file. Also the files are different for about 1500+ rows of code (14227 vs 15850).

Please help me, how import and use that lib in a proper way. Thanks, and sorry for my bad english.

[akdcl]

Hi, you can add dragonBones to your html like this: https://github.com/DragonBones/DragonBonesJS/tree/master/Pixi/Demos https://github.com/DragonBones/DragonBonesJS/blob/master/Pixi/Demos/index.html then use dragonBones directly.

[alcalyn]

I agree that it is hard to use DragonBonesJS out of the box.

I finally found a way to install it like a regular dependency, here is a Typescript project where I did it: https://gitlab.com/Alcalyn/game-draft

Main tricks was to:

• Include this repo with npm (or yarn):

npm install dragonbones-runtime@https://github.com/DragonBones/DragonBonesJS

• Configure in tsconfig.json to load dragon types:

{
    "compilerOptions": {
        "...": "...",
        "target": "es2017",
        "module": "commonjs"
    },
    "include": [
        "node_modules/dragonbones-runtime/DragonBones/src/**/*.ts",
        "src/**/*.ts",
        "test/**/*.ts"
    ]
}

• Load Dragonbones js in my index.html:

<script src="./node_modules/dragonbones-runtime/Pixi/5.x/out/dragonBones.min.js"></script>