Help me with my first mini library for BabylonJS

Questions
, , ,
1

Hi! I trying to create my own npm package for BabylonJS.
Could give advice how to improve my package and which potential problems does it have now?
Firstly I worrie about dependencies description in the package.json, is it correct? Should I add @babylonjs/core into usual dependency or devDependency?

Here is the link: GitHub - Dok11/attach-node-to-scroll: Behavior class for BabylonJS that adds ability to attach scroll event to animation progress

Welcome to any critic or improvement suggestions!
I want to learn how to create npm packages and use best practices as much as possible.

1 Like
2

Oh wow! That’s awesome :slight_smile:

These is always a never-ending list of improvements. And no one gets it perfect ever :wink:

Just a few things from looking at the code a few minutes:

  1. You should tell npm which files to publish using the “files” key in package.json. Otherwise only the index.js file will be deployed.
  2. Babylon should be a dev dependency AND a peerr dependency. Now - the dev dependency can have a fixed version, but the peer dependency is the one defining what version of babylon will work with this plugin. The more generalized you make it, the more people will be able to use it. Are you using features that were introduced in 5.20.0? then this is the minimum version that you support. Maybe > 5.0.0 works? You should check that :slight_smile:
  3. You should build both cjs and mjs (commonjs and esm as module output).
  4. You should include the build scripts in package.json. I assume you use typescript?
  5. when importing from @babylonjs/core import from the right file and not from the main directory to improve tree-shaking (the first line in AttachNodeToScroll.ts
  6. Document your API, so people importing it will see the codedoc.
  7. IMO - you don’t need to commit the dist folder. The dist folder will be included when pushing it to npm, but github is not for dists. Some will argue that it is a good thing (there are advantages), this is more of a personal opinion.
  8. Fix your readme:
    image
    image854Ă—128 11.5 KB

I guess there are a few other things, but that’s a start.

1 Like
3

Thank you for these advices!
I implemented them and push to git, could you check it again? I am not sure is I made these fixes correct :slight_smile:

4

And one question more, do I need to put

animationGroup.play();
animationGroup.goToFrame(targetFrame);
animationGroup.pause();

into scene.onBeforeCameraRenderObservable.addOnce();?

5

@RaananW would you suggest me, how I should change my library if I want to import it in a simple html page like this:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://my-web-site-or-cdn.com/my-library.bundle.js"></script>
1 Like
6

This might be useful info? Authoring Libraries | webpack

1 Like
7

I thought it sould be some secret relative to global object “window.BABYLON” that can’t be described in the common documentation about Webpack. Probably I should define it in the build script/config, I don’t know…

8

You would just not import it and add it to the typescript types list so that webpack / ts do not complain and understand it is in the page as a global.

1 Like
9

your library should not be concerned of whether or not babylon is present. this is the job of the developer using the plugin. They should decide how they provide babylon to the end user. You, as the plugin dev, can create a second project, consuming both your plugin and babylon as dependencies (and not dev/peer dependencies), if you want to check how things are working. keeping this separation will help you deliver the leanest plugin you can provide - without the need to push babylon as part of your plugin.

I hope it makes sense and helped you somehow.

10

So, by default we don’t have ability to use npm packages without package manager, even in the playground? And me, as a some library developer don’t have easy way (a little change of the library) that can add this ability?

11

You can, of course, use CDNs to do that. but most people consuming your package will probably use a package manager, so it is your responsibility to provide them with the simplest way (for them) to consume your package. This is why babylon offers CDN, UMD npm and es6 npm - any developer can choose how to use the package.