Skip to content

Instantly share code, notes, and snippets.

@TomByrne
Last active February 1, 2021 05:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TomByrne/9495dba331ed8365b06abc1d9fa50d2d to your computer and use it in GitHub Desktop.
Save TomByrne/9495dba331ed8365b06abc1d9fa50d2d to your computer and use it in GitHub Desktop.
Packaging NPM dependencies into a JS/Haxe Application

When using NPM Dependencies in Haxe, the referenced JS doesn't get automatically pulled into your Haxe-compiled JS file. One way to include this JS is using webpack. These dependencies will only be resolved by webpack if you use the @:jsRequire metadata.

Firstly install webpack: npm i -g webpack.

After Haxe generates it's JS output, it will contain un-resolved require() calls. To resolve these dependencies (and any deeper dependencies), run webpack like this: webpack --config webpack.config.js

webpack.config.js:

const path = require('path');
const dir = path.resolve(__dirname, 'bin/html5/bin');

module.exports = {
  target: 'electron-renderer',
	mode: 'development',
	context: dir,
	entry: path.resolve(dir, 'MyApp.js'),
	output: {
		path: dir,
		filename: 'MyApp_webpack.js',
		libraryTarget: 'var',
    library: 'lime'
	}
};

This specifies Lime's default JS output directory (bin/html5/bin).

Setting library=lime means that the 'lime' variable will be available outside the webpacked JS context (for use in the wrapper html), this will need to be tweaked based on what library you're using.

Setting target=electron-renderer means that require calls to node/electron services will remain unresolved (so that they can be resolved at runtime. This can be removed/tweaked based on where the App will be running.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment