Build system

Paperbits build system is mainly based on two popular technologies: npm and webpack. We use npm as a package manager and webpack as a bundler and development server.

NPM

If you’re familiar with npm, you already know that it helps you to manage (install, uninstall, upgrade, audit etc.) and keep track of your project’s dependencies that are all listed in package.json file (usually found in the root of your project).

package.json

There are 3 important sections in this file:

dependencies — lists all the libraries needed to run your application;

devDependencies — libraries used to build and maintain your project;

scripts — user-defined commands for various purposes;

Speaking of commands — besides npm start and npm run publish, which we learned about in Getting started guide, there are few more worth mentioning:

> npm run build-designer

This command builds the designers bundle in production mode (with all the required optimizations like minification and tree-shaking in place).

> npm run build-publisher

This command builds the publisher bundle in production mode (the one we used in Step 3 in the previous chapter).

Webpack

webpack.[scope].js

For the commands described above (and not only them) there are respective Webpack scripts.

webpack.design.js — builds designer;

webpack.publish.js — builds publisher;

webpack.develop.js — builds designer in the development model;

webpack.theme.js — builds website theme styles and scripts;

webpack.build.js — builds all components in production mode;

TypeScript

As you could notice, the entire Paperbits project is built using TypeScript. In order to support a wider range of browsers, we compile the code base into JavaScript of version ES5 with a number of polyfills (mainly represented by Core JS library) to get advantage from some of the ES2015 and ES2017 features like async/await.

Startup files

startup.design.ts

startup.publish.ts

startup.design.ts