Template to set up TypeScript for SugarCube 2, and bundle all the code using Webpack.
Uses Tweego to compile the Twee project (and assumes that it is already set up).
-
Clone this repository, or use it as a template to create your own.
-
Run
npm i(requires Node) to install all dependencies.
-
npm run devto run in development mode. Starts Tweego and Webpack in watch mode, and launches a local web server with hot reload capabilities. -
npm run buildto build the html in production mode. Compiles all TS to minified JS and builds with Tweego. -
The build commands are set to make Tweego include these directories/files:
-
src/modules/: (From the Tweego documentation)Module sources (repeatable); may consist of supported files and/or directories to recursively search for such files. Each file will be wrapped within the appropriate markup and bundled into the
<head>element of the compiled HTML. Supported files:.css,.js,.otf,.ttf,.woff,.woff2. -
src/head.html: (From the Tweego documentation)Name of the file whose contents will be appended as-is to the
<head>element of the compiled HTML. -
src/__compiled/: Compiled TypeScript ends up in here. Left upto webpack to manage. DO NOT put extra files in here, as this directory is cleaned out each timenpm run buildis run. -
src/styles/: All stylesheets go in here. -
src/twee/: All Twee files go in here.
-
-
The build commands are set to make Tweego export the generated html to
dist/index.html. Thus, all assets go indist/.
-
This project comes with example TypeScript and Twee code to showcase the toolchain working.
-
The entry point for Webpack is set as
src/scripts/index.ts, and the out directory assrc/__compiled. To modify, look intowebpack.config.js. -
TypeScript is set to transpile down to ES2015 code. To modify, look into
tsconfig.json.