mirror of https://github.com/zulip/zulip.git
27 lines
2.0 KiB
ReStructuredText
27 lines
2.0 KiB
ReStructuredText
|
=======================
|
||
|
|
Front End Build Process
|
||
|
|
=======================
|
||
|
|
|
||
|
|
This page documents additional information that may be useful when developing new features for Zulip that require front-end changes. For a more general overview, see the new feature tutorial. The code style documentation also has relevant information about how Zulip's code is structured.
|
||
|
|
|
||
|
|
Primary build process
|
||
|
|
=====================
|
||
|
|
|
||
|
|
Most of the exisiting JS in Zulip is written in IIFE-wrapped modules, one per file in the `static/js` directory. When running Zulip in development mode each file is loaded seperately. In production mode (and when creating a release tarball) JavaScript files are concatenated and minified.
|
||
|
|
|
||
|
|
If you add a new JavaScript file it needs to be specified in the `JS_SPECS` dictionary defined in `zproject/settings.py` to be included in the concatenated file.
|
||
|
|
|
||
|
|
Webpack/CommonJS modules
|
||
|
|
========================
|
||
|
|
New JS written for Zulip can be written as CommonJS modules (bundled using `webpack <https://webpack.github.io/>`_, though this will taken care of automatically whenever ``run-dev.py`` is running). (CommonJS is the same module format that Node uses, so see `the Node documentation <https://nodejs.org/docs/latest/api/modules.html>` for more information on the syntax.)
|
||
|
|
|
||
|
|
Benefits of using CommonJS modules over the `IIFE <http://benalman.com/news/2010/11/immediately-invoked-function-expression/>`_ module approach:
|
||
|
|
|
||
|
|
* namespacing/module boilerplate will be added automatically in the bundling process
|
||
|
|
* dependencies between modules are more explicit and easier to trace
|
||
|
|
* no separate list of JS files needs to be maintained for concatenation and minification
|
||
|
|
* third-party libraries can be more easily installed/versioned using npm
|
||
|
|
* running the same code in the browser and in Node for testing is simplified (as both environments use the same module syntax)
|
||
|
|
|
||
|
|
The entry point file for the bundle generated by webpack is ``static/js/src/main.js``. Any modules you add will need to be required from this file (or one of its dependencies) in order to be included in the script bundle.
|