PlayBuild - A compiler and Package Manager for PlayCanvas

Useful Resources
,
#1

icon
icon1024×1024 41.6 KB

PlayBuild

An in-editor compiler, bundler and package manager for the PlayCanvas editor that adds support for ES Modules, JSX plus all the usual features of modern web tooling .

Install
Getting Started
Docs

What this means?

With PlayBuild installed you can import and use modules in your code…

import config from './config'
import { utils } from '../utils/math'
import React from 'react'

External libraries

It also adds a dedicated package manager so you can install any 3rd party library from npm from the code editor…

package-manager

What else?

PlayBuild is built around a compiler/bundler which concatenates and optionally minifies your projects code. This can result in faster start up times due to smaller files and less network overhead. It’ll also remove any dead code you don’t use to keep your builds as light as possible

Configurable

You can also configure the bundler depending on your needs. It features a many of the options found in WebPack and Esbuild such as minification and tree-shaking.

What about TypeScript?

Although you can use TypeScript in your PlayBuild projects and it will compile correctly, the code editor used in PlayCanvas is not (yet) configured to handle typescript files. See the docs for more information.

18 Likes
#2

The extension has now been approved on the Chrome Webstore and we’ll be sending out emails to our beta testers shortly

6 Likes
#3

This is great stuff. Will it be officially supported in the future?

#4

New releases

v0.0.3

PCPM has now been rebranded as PlayBuild, which is a little easier to use. Most references have been updated, but there still exist a few legacy instances that refer to older pcpm package.

  • UI updates

    The UI for installed external packages has been updated. You can now set the package version via the UI now rather than having to manually edit the package.json

  • Removed PCUI + Observer from the build

    PlayBuild now uses the in-editor version of PCUI. The dependancy on pcui has now been removed from the build as it’s already provided by the editor. This may have caused hard to debug issues with having two version of the library especially if versions became out of sync.

  • Compiler options

    You can now specific compiler options using a playbuild field in the package.json. This allows you to control the behaviour of the compiler by enabling minification or other features. These are a subset of the options available in esbuild

    {
	dependencies: {},
	playbuild: {
		define: { DEBUG : 'true' }
		drop : ['console', 'debugger']
		keepNames: true,
		mangleProps: true,
		minify: true,
		treeShaking: true
	}
}

v0.0.2

  • UI Improvements

    Overhaul of the UI to provide better feedback when the compiler is running for the project and when it’s not. This also includes a CTA in the ui to enable the compiler by creating a package.json file.

  • Upgraded the esbuild wasm compiler

  • Improved stability for file watching

    There were a number of issues watching the package.json in the root of the registry which led to situations where the compiler was not correctly initialised when it should have been or vice-versa. This has now been improved and should be more stable across projects with multiple users working concurrently.

  • Compiler/Bundler now works with typescript and jsx

    Typecript and JSX has now been enabled by default in the compiler, so it will correctly bundle these files. However there the PC Monaco editor is not linting some of these files correctly which defeats much of the need for typescript. If/when the editor can be updated though, this should automatically translate without any code changes needed to pcpm

3 Likes