Jump to content

Using BabylonJS npm package from Typescript with browserify


olrehm
 Share

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 months later...

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 3 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...