Submit Feedback

Migrating Your Project to Use liferay-npm-bundler’s New Mode

Since issue #303, two modes of operation are available for the liferay-npm-bundler. You can preprocess files before the bundler runs, or you can use the bundler to handle the entire process, similar to webpack (processing source files via a set of rules). Follow these steps to migrate your project to use the new configuration mode, so the bundler can handle the entire process:

Open the project’s package.json file and update the build script to use only the liferay-npm-bundler:

old version:

{
  "scripts":{
    "build": "babel --source-maps -d build src && liferay-npm-bundler"
  }
}

new version:

{
  "scripts":{
    "build": "liferay-npm-bundler"
  }
}

Define the rules for the bundler to use (e.g. running babel to transpile files) in the project’s .npmbundlerrc file. The example configuration below defines rules for using the babel-loader to transpile JavaScript files. See the Default Loaders reference for the full list of default loaders. Follow the steps in Creating Custom Loaders for the Bundler to create a custom loader. The liferay-npm-bundler processes the *.js files in /src/ with babel and writes the results in the default /build/ folder:
```
{
  "sources": ["src"],
  "rules": [
    {
      "test": "\\.js$",
      "exclude": "node_modules",
      "use": [
        {
          "loader": "babel-loader",
          "options": {
            "presets": ["env"]
          }
        }
      ]
    }
  ]
}
```
note

Although the new mode of the liferay-npm-bundler acts very much like webpack, it is not compatible with webpack. Webpack creates a single JavaScript bundle file while the liferay-npm-bundler targets AMD loader.