ES6 loaders support for non-node environment

Feature requests
,
1

I’m trying to get a front-end project working with es6 modules (see this thread). Unfortunately, I can’t get it to work since the loaders are using imports like this:

import { Example } from '@babylonjs/core/...'

Which only works with modules in a node environment. I’m working on a PR so that it will work, but have run into an issue:

In the loaders currently, imports look like this example:

import { TransformNode } from "core/Meshes/transformNode"

I tried changing all of them so it looks like this (note the amount of parent directories is correct):

import { TransformNode } from "../../../core/src/Meshes/transformNode"

That does not work though. What should the import look like so that when compiled it uses a relative path instead of an npm module path? Is there a convenient build option to enable using relative import paths?

Edit: I should note that I was able to change the paths of the built @babylonjs/loaders to look like this:

import { TransformNode } from '../../core/Meshes/transformNode.js';

Which works successfully.

2

I’m not very familiar with imports/modules but I’m sure @RaananW can help here :slight_smile:

3

This was answered in a different thread. not sure why we need a new one :slight_smile:

The short answer is - no, this is not going to be changed.

1 Like
4

It makes sense… What if we could have a simple npm/npx command bundled with loaders that converts the paths?

For example:

npm i @babylonjs/loaders
npx babylonjs-loaders-to-es6

Would allow the usage of es6 modules whilst being backward compatible. It would also enable devs to simple add the command to the post-install npm script, and work perfectly

5

This will not be a part of the framework. You can generate any script you want, of course! And run it locally. I think it is a mistake and that there are tools that were built to solve this exact issue. But you don’t want to use them…

6

I’m fine with using a bundler and have tried though I have spent hours banging my head on the wall trying to get webpack and/or rollup to work. Using a bundler also introduces dev time overhead.

7

Do we have something like Electron’s userland organization? It could be useful to have a place for community projects (e.g. a loaders-to-es6 converter).

8

you can create one, of course. But, though I am afraid to sound like an open record, it is not needed.
the loaders are already in es6. import maps solves. it.

9

I am going to close this topic, because we are going around in circles to be honest. I have created this project which explains the way to do it:

RaananW/babylonjs-esm-in-browser: A simple example of how to use Babylon.js es6 packages directly in your browser. (github.com)

3 Likes
10

Awesome!

I’m working on a node script that will resolve an entire import tree (without the need for import maps) that uses npm - though I definitely love import maps and will use those once they are more widely supported.

I apologize for the circular discussion, hopefully anyone also seeing the threads will find them useful.

2 Likes