The liferay-npm-bundler is a bundler (like Webpack or Browserify ) that targets Liferay DXP as a platform and assumes you’re using your npm packages from widgets (as opposed to typical web applications).
How the Liferay npm Bundler Works Internally
The liferay-npm-bundler takes a widget project and outputs its files (including npm packages) to a build folder, so the standard widget build (Gradle) can produce an OSGi bundle. You can learn more about the build folder’s structure in The Structure of OSGi Bundles Containing NPM Packages reference.
The liferay-npm-bundler uses the process below to create the OSGi bundle:
Copy the project’s
package.jsonfile to the output directory.
Traverse the project’s dependency tree to determine its dependencies.
For the project,
a. Run the source files, specified in the
.npmbundlerrcconfiguration, through the rules.
b. Pre-process the project’s package with any configured plugins.
c. Run Babel with configured plugins for each
.jsfile inside the project.
d. Post-process the project package with any configured plugins.
For each npm package dependency:
a. Copy the npm package to the output folder and prefix the bundle’s name to it. Note that the bundler stores packages in a plain bundle-name$package@version format, rather than the standard node_modules tree format. To determine what is copied, the bundler invokes a plugin to filter the package file list.
b. Run rules on the package files.
c. Pre-process the npm package with any configured plugins.
d. Run Babel with configured plugins for each
.jsfile inside the npm package.
e. Post-process the npm package with any configured plugins.
The only difference between the pre-process and post-process steps are when they
are run (before or after Babel is run, respectively). During this workflow,
liferay-npm-bundler calls all the configured plugins so they can perform
transformations on the npm packages (for instance, modifying their
files, or deleting or moving files).
In this reference section, you’ll learn more about the liferay-npm-bundler’s configuration, default presets, format, and more.