A better way to organize code
ES Modules allow you to split your code into reusable pieces using export and import statements. This promotes better code organization and maintainability by encapsulating functionality within modules. Dependencies are explicitly declared, making it clear which modules rely on others. This improves readability and makes the codebase easier to navigate.
// math.js
export const add = (a, b) => a + b;
// app.js
import { add } from './math.js';
console.log(add(2, 3)); // Outputs: 5
Module Scope Isolation
Variables and functions defined in an ESM Script are scoped to that module and are not added to the global object. This prevents naming collisions and accidental overwriting of global variables. Modules encapsulate their internal logic, exposing only what is explicitly exported. This leads to cleaner code and reduces the risk of unintended interactions between different parts of the codebase.
Improved Performance
ES Modules are loaded asynchronously, allowing the browser to fetch and execute modules in parallel without blocking page rendering, which improves load times.
Dependency Resolution
The module loader handles the resolution and loading order of dependencies, ensuring that modules are executed in the correct sequence. This eliminates the need to manually configure the script execution order.
Strict Mode by Default
ES Modules are always executed in JavaScript’s strict mode. This mode enforces stricter parsing and error handling, helping to catch common coding mistakes and unsafe actions. With strict mode, certain silent errors throw exceptions, making debugging easier. Variables must be declared before use, preventing accidental globals.
Optimized Bundling
ESM Scripts enable our bundler to perform tree shaking—removing unused code during the build process. This results in smaller, more efficient bundles.
Improving the Code Editor experience**
ESM Scripts enable a much richer editor experience via Monaco, which can better analyze your code for type errors and provide intelligent code completions—not only for PlayCanvas APIs but across all your project code.
Final Thoughts
By adopting ESM Scripts, you unlock a range of features that enhance both the development experience and the performance of your PlayCanvas projects. We encourage you to participate in the closed beta and experience these benefits firsthand. If you have any questions or need assistance, feel free to reach out!