Bundle ES modules to browser with Browserify

Bundle ES modules to browser with Browserify

2019-11-12 Update:

We can use gulp to simplify the workflow:

1
2
3
4
5
6
const bundle_sdk = shell.task([
`echo "window.AppsEngineUIClient = require('./AppsEngineUIClient').AppsEngineUIClient;" > client/glue.js`,
'cd client && npx browserify glue.js | npx uglifyjs > AppsEngineUIClient.min.js'
]);

gulp.task('bundle', bundle_sdk);

Below is the original post:

Firstly, install related dependencies with npm:

1
npm i -g browserify uglify-es

Then, create a glue script (here we can name it main.js) to inject the ES module to be a window property.

1
window.AppsEngineUIClient = require('./AppsEngineUIClient').AppsEngineUIClient;

For the last step, use browserify to bundle modules and uglifyjs to minify the script (remove all comments for example).

1
browserify main.js | uglifyjs > AppsEngineUIClient.min.js