New Monaca CLI and Localkit
What's new in Monaca CLI 3.0 and Localkit
The new Monaca CLI and Localkit is a significant improvement from the past toolkits, providing you the more flexibility and robustness to your development.
Ejecting all build dependencies
The new version of Monaca toolkits enable to configure everything for the project.
In the previous version of CLI and Localkit, common modules used for building, bundling, and previewing apps were globally installed. Some example of these modules were Webpack, Browser-sync, Loader, and Babel. Installed globally meant that all Monaca projects shared a single set of tools and version locked.
The new release removes the global modules and installs them with each project. We now have the freedom of managing our toolset. Additionally, being installed into the project scope means the ability to customize each project uniquely.
The freedom to customize and manage is now in your hands.
Cordova of your choice
From this new release, Cordova is also decoupled from the project. It is now installed as one of the devDependencies
for each project. That means the developer can now choose to use different Cordova versions for their projects.
At the moment, remote build server is still using a preconfigured Cordova distribution and you cannot change the version freely. We are working on to eliminate this limitation too!
Configurable tasks with package.json scripts
To provide more flexibility to developers in choosing their previewing and building tool, you can define each task in package.json. Now, monaca preview
, monaca transpile
, and monaca debug
commands basically just execute scripts defined in package.json
.
New Monaca CLI Commands
The following commands are added to the CLI.
monaca init
monaca update
This command is used to update project created using Monaca CLI 2 or lower.
Migration to the new version
All existing projects are required to update.
Monaca Cloud IDE and Localkit users
When opening the project, a dialog will appear to automatically update the project. Please follow the instruction and the update is done.
Monaca CLI Users
For Monaca CLI users, run monaca update to update the project.
How it affects your project?
Non-Transpile projects
The package.json
will be created/modified with the following changes:
A
monaca:preview
command will be added to thescript
property.A
dev
command will be added to the script unless it already exists."dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
Browser-sync
andCordova
will be added asdevDependencies
.
Transpile projects
The package.json
will be modified with the following changes:
monaca:preview
,monaca:transpile
andmonaca:debug
commands will be added to thescript
property.dev
,build
, andwatch
commands will be added to the script unless they already exist.Required packages including
Webpack
andCordova
will be added asdevDependencies
.
Other file changes
monaca_preview.js
: a script to manage webpack and webpack-dev-server instance.webpack.dev.new.config.js
: a refined webpack configuration for development mode. It is used inmonaca_preview.js
.webpack.dev.prod.config.js
: a refined webpack configuration for production mode.
Summary table
Confused with many changes? Here there is a table summarizing the changes we have made.
Changes
Previous Version
New Version
Package Dependencies
Install globally
Install required build modules to the project.
Cordova
Install globally
Install to the project
Monaca CLI Commands
monaca preview
Using globally installed browser-sync or webpack-dev-server for previewing.
Run monaca:preview script in package.json
file.
It by default will use locally installed browser-sync or webpack-server for previewing. For migrated project, it will use webpack-dev-server.
monaca transpile
Use globally installed Webpack to transpile and build the project.
Run monaca:transpile script in package.json
file.
It will use locally installed Webpack by default.
monaca debug
Use globally installed Webpack to transpile and watch the file changes.
Runs monaca:debug script in package.json
file.
It will use locally installed Webpack by default.
Last updated
Was this helpful?