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.

constantsdescriptionnode-config key
IS_PRODUCTIONWhether the build mode is NODE_ENV=production or not-
SITE_TITLESite titletitle
SITE_URLSite URLurl
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.

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.