Adding liferay-npm-bundler to Your Portlet

Adding liferay-npm-bundler to your portlet involves installing the package via npm and adding it to your npm build process.

Installing liferay-npm-bundler

Note: liferay-npm-bundler 1.x performs aggressive semantic version resolution, which can potentially lead to unstable results. To avoid issues, we recommend that you use the latest version of the bundler (2.x at the time of this writing).

Follow these steps to install liferay-npm-bundler:

1. Install NodeJS >= v6.11.0 if you don’t have it installed.

2. Navigate to your portlet’s src/main/resources/META-INF/resources folder.

   If you don’t have a portlet already, create an empty MVC portlet. For convenience, you can use Blade CLI to create an empty portlet with the mvc portlet blade template.

3. Run the following command to install the liferay-npm-bundler:

   npm install --save-dev liferay-npm-bundler
   

Note: Use npm from within your portlet project’s root folder (where the package.json file lives), as you normally do on a typical web project.

Now that you have the liferay-npm-bundler installed, you can add it to your npm build process.

Adding liferay-npm-bundler to Your Build Process

Once your source is transpiled (if necessary) to ECMAScript and converted to AMD format for the Liferay AMD Loader, you must run liferay-npm-bundler in package.json to pack the needed npm packages and transform them to AMD. This lets Liferay AMD Loader grab the packages from the Portal.

Add liferay-npm-bundler to your package.json’s build script:

"scripts": {
      "build": "[... && ] liferay-npm-bundler"
}

The [...&&] refers to any previous steps you need to perform (for example, transpiling your sources with Babel).

You can use any languages you like as long as they can be transpiled to Ecmascript 5 or higher (the only requirement is that Babel can process it and your browser can execute it). When you deploy your portlet using Gradle, the build script is called as part of the process.

Now you know how to add the liferay-npm-bundler to your portlet!

Related Topics

Configuring liferay-npm-bundler

Understanding How liferay-npm-bundler Formats JavaScript Modules for AMD