Working on a large codebase there are two ways to organize your code. The first is just keeping all logic in a single
.js file, which quickly becomes hard to change and comprehend. The second approach is splitting code by functionality, creating multiple
.js files and including all of them in the layout file.
While the second approach is preferred it also has some problems. Lack of explicit references to value definitions makes it hard to track where a certain values comes from, and, since all files use a single shared scope, naming conflicts can arise.
In Lua these problems are solved with
The concept of modules is pretty simple. First you need to mark things that you want to expose from a file with
And then you can
import it in other file:
That's where webpack is useful. webpack takes your modules, resolves dependencies and merges them into a single plain
.js file, that can be used in Panorama.
In addition, webpack:
- Makes it easier to share code with other custom games, using custom packages and npm
- Makes it possible to share code with other environments, such as Node.js-based web servers, or Lua side of your custom game built with TypeScriptToLua
- Consolidates all your Panorama code transformation tools, such as TypeScript, Sass, and code generators
- Install Node.js.
- Create a
package.jsonfile in the root directory of your project with this content:
We have to use
node --preserve-symlinks node_modules/webpack/bin/webpack.js instead of just
webpack because of reverse symlinking.
- Install dependencies by opening a command prompt and executing
npm install -D [email protected] webpack-cli webpack-panorama.
webpack requires you to pass a configuration file, telling it how to transform your files. As you might have noticed in the previous step, in this tutorial we'll store it in
Here's a basic configuration:
Now let's create a few files for webpack to work on:
And layout files to make Panorama run our script:
Now you can run
npm run build in your terminal to build the project once, or
npm run dev to make it rebuild the project every time you change your scripts.
After building the project, webpack would output a
Besides local script files, modules allow you to use code written by other developers.
For example, let's add a popular utility library
First, you need to add it to your project using npm:
And then you can import it like any other module:
You can find more packages built for Panorama using this search query: keywords:dota, panorama.
webpack loaders are packages that process your files before webpack puts them into a bundle.
First you need to install a few dependencies:
Now you need to tell webpack when and how to use this loader, using
module.rules configuration section:
Currently support for TypeScript for Panorama cannot be provided just with a loader, because of a way referenced script files are processed. To resolve this you also need to use
In the previous steps webpack have been used only for script assets. This isn't perfect, because you have to manually keep entry points in sync, directory structure isn't centralized, and you can't use webpack for .css asset processing.
The solution is to let webpack take care of all your Panorama files.
webpack.config.js like that:
Now you need to move layout file to the source directory, and use relative script path:
Now you don't need to synchronize your script entrypoints and layout script references, however you still have to do this for
PanoramaManifestPlugin allows you to define your entrypoints in a simple format, and generates
custom_ui_manifest.xml including them.
Since webpack 5 is currently in beta, some transitive dependencies might yield deprecation warnings. They can be safely ignored.
entries option of
PanoramaManifestPlugin accepts a list of entrypoints following this schema: