As @will mentioned, those libs are Node based, which won’t work in the browser, but there are numerous other libraries that do, but for the moment you’ll need to grab a UMD bundle and manually link to it . If you can’t find an official UMD bundle, it’s work checking something like jsdelivr.com ore esm.sh which are 3rd party cdn’s that do provide bundles of popular JS libraries.
I appreciate it’s not an ideal workflow, but we are actively working on full native support for ES Modules, which you can track here
playcanvas:main ← playcanvas:esmodules
opened 02:14PM - 18 Oct 23 UTC
## ES Module Component System
This PR adds a component system to natively s… upport ES Modules in PlayCanvas. This lays the ground work for further work such as bundling and editor support whilst retaining a familiar API. For further work and roadmap see #4767
### New ESM format
```javascript
const attributes = {
number: { type: 'number', default: 10, ... },
nestedObj: {
number: { type: 'number', default: 10 },
}
}
export default class MyModule extends EsmScriptType {
static attributes = attributes;
// Optional name that overrides 'MyModule'
static name = 'Other Name'
// @see https://developer.playcanvas.com/en/user-manual/scripting/anatomy/#initialize
initialize(){}
// @see https://developer.playcanvas.com/en/user-manual/scripting/anatomy/#update
update(dt){}
// @see https://developer.playcanvas.com/en/user-manual/scripting/anatomy/#postUpdate
postUpdate(dt){}
// Called when and entity is disabled or removed from the scene
destroy(){}
}
```
### New API
This method imports a esm script, registers it with the component, and performs a swap() when it updates if possible. See [the implementaiton](https://github.com/playcanvas/engine/blob/a56c82598578f8a91ddf1cf52263d0ab2404c82b/src/framework/components/esmscript/component.js#L418)
```javascript
import * as Rotate from './utils/rotate'
const script = entity.esmscript.add(Rotate, { speed: 10 }, enabled )
// initialize() called synchronously
asset(entity.esmscript.get('Rotate') === script)
```
Few notes:
- Familiar API to existing scripts with simple Class based syntax
- Script type like functionality (events etc) provided via an optional EsmScriptType base class
- Attribute definition is isolated from the class definition, it simply describes metadata for class props that are exposed to the editor. This metadata is not required at runtime. Attribute code can be shaken out.
- One module exports one script
- Attributes should ideally be statically analyzed, and not have to be executed in order to parse TBD
- Execution order is in order for now. This will be changed to a global priority order in s separate PR. see #1857
- This does not support HMR/hot swapping. HMR should not be part of production code, and will be part of the launcher
- [x] Implement Script ESM Component system
- [x] Implement initialize / destroy / update methods
I confirm I have read the [contributing guidelines](https://github.com/playcanvas/engine/blob/master/.github/CONTRIBUTING.md) and signed the [Contributor License Agreement](https://docs.google.com/a/playcanvas.com/forms/d/1Ih69zQfJG-QDLIEpHr6CsaAs6fPORNOVnMv5nuo0cjk/viewform).
1 Like