JavaScript preprocessor and framework build

Constants

• Babel
• TypeScript
• Vue

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

constants	description	node-config key
IS_PRODUCTION	Whether the build mode is NODE_ENV=production or not	-
SITE_TITLE	Site title	title
SITE_URL	Site URL	url
SITE_AUTHOR	Site author	author
SITE_DESCRIPTION	Site description	description
SITE_ROOT	Site root path (e.g. /)	siteRoot
CONFIG	Reference to below	-

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

config/development.yml

api: https://foo.com

Apps.ts

console.log(CONFIG.api)

// result => https://foo.com

* 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.

example

workers/Worker.ts

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

Apps.ts

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.