Using BabylonJS npm package from Typescript with browserify

[olrehm]

Hi,

I am trying to use the BabylonJS npm package from Typescript with browserify. These are the issues I run into:

• If I just `require('babylonjs/babylon')` without import, Typescript complains  `error TS2304: Cannot find name 'require'.`
• If I use `import BABYLON = require('babylonjs/babylon')` or `import BABYLON from 'babylonjs/babylon'` I get `error TS2306: File '/home/olrehm/Code/civ.ts/node_modules/babylonjs/babylon.d.ts' is not a module.`
• If I do not require at all, but use tsconfig.json or `/// <reference path="..." />` to pull in the babylon.d.ts, Typescript happily compiles, but I am missing any module loading statement for browserify to pull in the source

I managed to somewhat make it work by adding `export = BABYLON;` to the end of babylon.d.ts making it a module and then import...from it. But of course I would rather not have to change this file that is installed through npm.

I could also maybe make it work by passing babylonjs as "external" to browserify, to ensure that it is loaded though not required, but that means I need to write the dependency on Babylon into my gulp files, where I would much rather keep that information in my package.json.

How are others doing that? I guess adding module: 'commonjs' to BabylonJS' gulp files would create a module that one can import/require - would that break some other approach?

Ole

[GameMonetize]

Hey

Modules should work (I know that many users are using it). We added these lines at the end of babylon.js:

if (((typeof window != "undefined" && window.module) || (typeof module != "undefined")) && typeof module.exports != "undefined") {
    module.exports = BABYLON;
};

[olrehm]

I can see where you have a task like that in your Gulp file, but it does not seem to work:

mkdir tmp && cd tmp
npm i babylonjs
cat node_modules/babylonjs/babylon.d.ts | grep module.exports

Returns nothing. Nothing here either:

https://github.com/BabylonJS/Babylon.js/blob/f6b36e2a1abeee1e0fde239a9b62b16736b62b56/dist/babylon.2.4.d.ts

And only the gulp tasks here:

https://github.com/BabylonJS/Babylon.js/search?utf8=✓&q=module.exports

Are you sure this works?

[olrehm]

Not sure I understand your Gulp setup completely, but it seems to me that we should add `.pipe(addModuleExports("BABYLON"))` here:

https://github.com/BabylonJS/Babylon.js/blob/5442cc9aa0b14a71a957db129b43062eafa041e4/Tools/Gulp/gulpfile.js#L101

That at least results in gulp typescript outputting a d.ts file that has the module.exports you are talking about in it. I'll send you a pull request after dinner...

[olrehm]

I see I have not read your answer carefully enough: You add this code to the JS files, not to the *.d.ts.

That makes it possible to require babylon from JS, but my problem is that I cannot require it from Typescript, because the d.ts is not in module format. The d.ts would need to have a 

export = BABYLON;

somewhere. I will close my pull request, and see if I cannot make another one where I add the addition to the d.ts file.

[GameMonetize]

Ok gotcha!

[olrehm]

Next try: https://github.com/BabylonJS/Babylon.js/pull/1372

[olrehm]

TL;DR: When I run gulp on a fork, a file babylon.module.d.ts is created which is the one I would like to use. However, when I `npm install babylonjs` there is only babylon.d.ts, not the module version. Any idea why?

Long story:

A few months later, I am revisiting this. My PR (https://github.com/BabylonJS/Babylon.js/commit/b9218551147d0225feac0548214491f35b4f78e1) was rolled back because it was breaking something else. 

The original problem is (if I am not mistaken): The js and d.ts files of Babylon.js as provided by npm are incompatible.  

The JS source needs to be loaded like so:

var BABYLON = require('babylonjs');

The corresponding TypeScript import would be

import * as BABYLON from 'babylonjs';

However, that does not work with the given d.ts because it is not a module but instead uses ambient namespaces. One can get the types correctly like so:

import 'babylonjs';

 Which compiles fine to

require('babylonjs');

But the JS file does not put BABYLON into the global scope - it returns it from the require.

As the files are, I cannot come up with a Typescript import statement that would do the right thing both for the types at compile time and for the JS source at runtime.

I forked the repo and ran `cd Tools/Gulp`, `npm install` `gulp typescript-all`, and that makes a file dist/preview release/babylon.module.d.ts, which is the same as dist/preview release/babylon.d.ts except that it has the `export = BABYLON` line I need - however, that file is not part of the the npm package that I install, despite being listed here: https://github.com/BabylonJS/Babylon.js/blob/master/Tools/Npm/package.json#L27

Any idea why that would be?

[olrehm]

I think I may have my answer: That separate file is new (4 days ago):

https://github.com/BabylonJS/Babylon.js/commit/af71269db7a6f909b92124d02a615831480134e6

So it was just not released yet. Great, then all I have to do is wait it seems. Do you have a release schedule?

[GameMonetize]

Hello, not yet but sometimes around end of march

[olrehm]

Any chance you could publish a tagged version of the prerelease? Something like

npm publish --tag next

I see you are asking for feedback on the preview release on the GitHub repo home page, and this would make it easy for people using npm to install it without breaking folks who are tracking latest. It would also fix my problem (at the cost of living on the bleeding edge, but that's okay).

I tried to point npm directly to your Github repo to get the current master, but that only seems to work when you have the package.json at the root of the repo: https://github.com/npm/npm/issues/2974

Out of interest: Why do you have the package.json in the Tools/Npm subfolder. Wouldn't it be much simpler to maintain a single package.json at the root instead of two in Tools/Gulp and Tools/Npm?

[olrehm]

I unblocked myself by just putting the binaries along with the package.json into a github repo and pointing npm to that:

https://github.com/rehmsen/babylon.js.2.6pre

Not ideal, but good enough until the next release is out.

[GameMonetize]

Good

[CodingMadeEasy]

@Deltakosh Could you please publish a preview release version of Babylon JS? It's cumbersome to have to clone the repo to make our own package.json file just so we can get the latest features. BabylonJS is updating at a rapid rate and it would be nice to always have access to the latest changes easily.

[Sebavan]

Could you rely on the cdn: http://preview.babylonjs.com/babylon.js for now (this is updated frequently and DK is in vacation) ?

 

[CodingMadeEasy]

@Sebavan Thanks for the swift response but no. We're using Typescript so having the type definitions is a must.

[Sebavan]

Yep, understood, I ll try to push a new version end of the week if it works for you ?
 

[CodingMadeEasy]

The sooner the better but yes we can wait until the end of the week.

[CodingMadeEasy]

@Sebavan Even after publishing please don't ignore the broader issue at hand. It's imperative that we as developers have an easy way to access the nightlies. Having to wait months for an update doesn't cut it when there are new features that we need.

[Sebavan]

Yep, for sure, this is not what we are doing in BJS, I ll update the deploy script to automatically publish from travis in the preview branch.

[Sebavan]

The new version is available as 3.0.1-alpha

We ll automate soon, just a few more checks to do.

[CodingMadeEasy]

Thank you!