haxe-modular
v0.14.0
Published
[![TravisCI Build Status](https://travis-ci.org/elsassph/haxe-modular.svg?branch=master)](https://travis-ci.org/elsassph/haxe-modular) [![Haxelib Version](https://img.shields.io/github/tag/elsassph/haxe-modular.svg?label=haxelib)](http://lib.haxe.org/p/mo
Downloads
337
Readme
Haxe Modular
Code splitting and hot-reload for Haxe JavaScript applications.
Why?
If you use Haxe for JavaScript, directly or indirectly (React, OpenFl,...), then you probably want to:
- make your web app load instantly,
- make your HTML5 game load quicker,
- load sections / features / mini-games on-demand.
Haxe has an excellent, compact and optimised JS output, but it's always a single file; even with good minification / gzip compression it can be a large payload.
Modular can split gigantic Haxe-JS outputs into load-on-demand features, without size/speed overhead, and without losing sourcemaps.
How?
import MyClass;
...
load(MyClass).then(function(_) {
var c = new MyClass();
});
The approach is to reference one class asynchronously in your code:
- at compile time, the dependency graph of the class is built and one additional JS file will be emitted (bundling this class and all its dependencies),
- at run time, when the aynchronous reference is evaluated, the additional JS is loaded (once) automatically.
Where to start?
There are 2 ways to use Haxe Modular, depending on your project/toolchain/goals:
- standalone Modular; zero dependencies, for any Haxe-JS project,
- Webpack Haxe Loader; leverage the famous JS toolchain.
In both cases, it is advisable to read about the technical details:
- How to extract/split whole libraries?
- Using Reflection? Need more granular control of bundling?
- How does on-demand loading work at run time?
What is the difference?
Both solutions:
- use Modular splitting under the hood,
- split automatically using a single
hxml
build configuration, - support NPM dependencies,
- allow hot-reloading of code.
What should I use?
Standalone Modular is an easy, drop-in, addition to a regular Haxe JS build process - it is very lightweight and unobstrusive, and you don't need to learn Webpack.
Using NPM modules however requires a bit of ceremony: all the NPM dependencies have to be gathered (manually) in a
libs.js
which is loaded upfront.Webpack Haxe Loader is a more powerful setup but you'll have to learn Webpack. Webpack is a complex and large system offering vast possibilities from the JS ecosystem.
FAQ
Q: Where can I get more help? I have questions / issues...
Q: Is it only for React projects?
- Of course not; anything targeting JavaScript can use it.
- However it does offer React-specific additional features for code hot-reloading.
Q: Is it possible to minify the code?
- Yes, with Standalone Modular you can either minify each script
yourself, or use
uglifyjs
orclosure
haxelibs for that: releasing to production. - Yes, with Webpack Haxe Loader it will be taken care of by Webpack as part of the production build minification.
Q: Can I extract a library/package from my code?
- Yes: you can split libraries, but for technical reasons, extracting a library (e.g. many classes used across the application) has some limitations.
Q: Can I still use the includeFile
macro to inject JS code in the output?
- Yes, but only when the code is inserted at the top of the file; this is the
default position when using
--macro includeFile('my-lib.js')
.
Q: Does it support Haxe 4's ES6 output? (-D js-es=6
)
- Yes since 0.12.0