Transpile projects with Monaca CLI
Monaca CLI is a command-line tool which makes local development of Monaca apps easier. Recently, a new function called “transpile” has been added to Monaca CLI. It can be used to transpile code for React/Angular 2 apps.
We will explain in details about the transpile option.
Installation of Monaca CLI
To use Monaca CLI, Node.js is required. After installing Node.js, use npm (or yarn) in the command prompt to install Monaca as follows:
$ npm install monaca -gUsage
Transpilation is used to convert languages like JSX (React) or Typescript (Angular 2) into something that can be executed by the browser. If you want to create a project with React, select the category ‘Onsen UI and React’ and then choose the desired template as following:
A directory called src has been created. The React app source code has been stored in this directory.
It is written as JSX as above. This could not be used as Monaca app without transpiling into ES5. Therefore, transpile is applied below.
How to transpile
Running the following monaca command will transpile the code.
- monaca upload
- monaca preview
- monaca debug
- monaca remote build
Transpilation is performed automatically in Monaca CLI. To execute transpile alone, use the command below. Fonts, JS and stylesheet will be minified.
If the command is successfully executed, these files will be placed in the www directory. This means files are being generated to be used as a Monaca app. The only exception is monaca preview, which keeps the result in memory (instead of www directory) in order to speed up the development process.
Next, all you need to do is to create React or Angular2 App.
Gulp could also be used to transpile; however, it consumes a lot of time. In this case, we recommend using Monaca to create the hybrid app easily.
