RE: liferay-npm-bundler

thumbnail
Andre Kreienbring, modified 5 Years ago. Regular Member Posts: 152 Join Date: 12/18/06 Recent Posts
It's time to ask the experts!
I have a perfectly working  modularized Javascript app which uses ES6 imports and exports. For that app I used webpack to create a single Javascript file with all the resources (like css, js, ...). The app uses some thirdparty libraries and I used npm to install and webpack to bundle them.
To make the JS app available to HTML pages I simply store an object on the global window. Like window.myapp = app. Works like a charm!
Now I want to make a portlet for Liferay 7.2.1 out of my app. I read a lot of information like
https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/using-external-javascript-libraries
https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-liferay-npm-bundler
https://portal.liferay.dev/docs/7-0/tutorials/-/knowledge_base/t/liferay-npm-bundler
and decided to give liferay-npm-bundler a try.
My (default) portlet project structur is like:
...
|_resources
  |_ src
    |_ js
      |_ xy.js
    |_css
      |_xy.css
|_ package.json
Here's my npm-bundler configuration
{
  "sources": ["src"],
  "create-jar": true,
  "output": "build",
  "rules": [
    {
      "test": "\\.js$",
      "exclude": "node_modules",
      "use": [
        {
          "loader": "babel-loader",
          "options": {
            "presets": ["env"]
          }
        }
      ]
    }
  ]
}

Results when I run npm lifery-npm-bundler:
1. There's a lot of output like mylib$jquery@3.4.1 in the build diretory. Which is funny, because the dependency is not defined in package.json. I guess it's required by one of the external libraries. QUESTION: How to avoid that? I know that Liferay already provides JQuery and don't need it in the generated bundle.
2. I configured "create-jar: true" but no OSGI Bundle jar is created in the build directory. I would like to deploy this jar to Liferay portal to publish my portlet.
3. Even if the OSGI Bundle would have been created... How do I use my app in the view.jsp? How to make a specific module (from the resulting bundle) globaly available so that my HTML can trigger the Javascript?
I'm stuck and hope that somebody has some advice :-)
thumbnail
Ivan Zaera, modified 5 Years ago. Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts
Hi:
Regarding 1, jQuery is included as a transitive dependency as you say. Even if the portal provides jQuery, you still may need it because it must be available as an AMD module, not directly taken from window. However, you can always exclude dependencies with this config setting -> https://github.com/liferay/liferay-js-toolkit/wiki/.npmbundlerrc-file-reference#exclude
2. I don't know why create-jar doesn't work, but I recommend creating an empty project with the JS Toolkit generator (https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-generator-liferay-js) and comparing its configuration with the one of your project. That may help to tune it.
3. If you use the generator proposed in 2, you will end up with a JAR file that already contains an OOB portlet ready to use, without any need on your side to do anything to show it, other than adding it to the page.
Hope this helps.