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 -g

Usage

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.

Monaca CLI command — Monaca Docs

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store