Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: liferay-npm-bundler
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
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 :-)
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 :-)
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.
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.