Building a UMD Bundle

If you need a UMD version of the library (for example, to use it in a PlayCanvas Editor project), follow these steps:

Create a new folder and navigate to it in your terminal
Create a new NPM project:
```
npm init -y
```

Install the required packages:

npm install --save @babel/core babel-loader webpack webpack-cli @playcanvas/observer @playcanvas/pcui

Create index.js with the following content:

import * as pcui from '@playcanvas/pcui';
import '@playcanvas/pcui/styles';

window.pcui = pcui;

Create webpack.config.js:

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'pcui-bundle.min.js',
        libraryTarget: 'window'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        }]
    },
    resolve: {
        extensions: ['.js']
    }
};

Add the build script to package.json:

{
    "scripts": {
        "build": "webpack --mode production"
    }
}

Build the bundle:
```
npm run build
```

The UMD bundle will be created in the dist folder as pcui-bundle.min.js. You can now use PCUI components through the global pcui object:

const panel = new pcui.Panel({
    flex: true,
    collapsible: true,
    headerText: 'Settings'
});

1.6 KiB Raw Blame History

Building a UMD Bundle

1.6 KiB

Raw Blame History