JavaScript preprocessor and framework build


  • Babel
  • TypeScript
  • Vue

The values set in Site Setting and Build Settings can be used in the template engine.

constantsdescriptionnode-config key
IS_PRODUCTIONWhether the build mode is NODE_ENV=production or not-
SITE_TITLESite titletitle
SITE_AUTHORSite authorauthor
SITE_DESCRIPTIONSite descriptiondescription
SITE_ROOTSite root path (e.g. /)siteRoot
CONFIGReference to below-

If you want to use node-config configuration information other than the available constants, you can use the CONFIG constants.

// result =>

* If you are using TypeScript, please define the type by yourself.

Splitting the common logic#

  • Babel
  • TypeScript
  • Vue

If two or more files have common logic, extract the common logic and put it in a separate file.
For example, it's useful when you have a library like lodash or jQuery.

You can specify the file name of the common logic.
The extraction file name is specified by Build Settings.

Library visualizer#

  • Babel
  • TypeScript
  • Vue

Using webpack-visualizer-plugin.
Visualizer build run to mode is "once".

Output is <project>/stats.

Web Worker#

  • Babel
  • TypeScript
  • Vue

Create a web worker using worker-loader.


const ctx: Worker = self as any
// Post data to parent thread
ctx.postMessage({ foo: 'foo' })
// Respond to message from parent thread
ctx.addEventListener('message', (event) => console.log(event))
export default null as any
import Worker from './workers/Worker'
const worker = new Worker()
worker.postMessage({ a: 1 })
worker.onmessage = (event) => {
// some kind of processing
worker.addEventListener('message', (event) => {
// some kind of processing

Service Worker#

  • Babel
  • TypeScript
  • Vue

See plugins document.