Use npm scripts with AMD Module Loader in the frontend, e.g. webcontentUse npm scripts with AMD Module Loader in the frontend, e.g. webcontenthttps://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=1119902002024-03-29T04:46:09Z2024-03-29T04:46:09ZRE: Use npm scripts with AMD Module Loader in the frontend, e.g. webcontentSeverin Rohnerhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1129354382019-03-29T10:25:39Z2019-03-29T10:25:39Z<html><head></head><body>Hi Ivan<br><br>Thanks for your answer and sorry for my late response.<br><br>It works great with the new module loader. <br><br>I just added the dependency in the package.json:<pre><code>{
"dependencies": {
"bricks.js": "1.8.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"liferay-npm-bundler": "^2.0.0"
},
"scripts": {
"build": "babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources &amp;&amp; liferay-npm-bundler"
},
"main": "index.es.js",
"name": "dep-bricks",
"version": "1.8.0"
}
</code></pre><br><br> and export the bricks.js in the index.es.js:<pre><code>import Bricks from 'bricks.js'
export default Bricks</code></pre><br><br>In the frontend (e.g. Freemarker template) it can be used in this way<pre><code><script type="text/javascript">
Liferay.Loader.require('dep-bricks@1.8.0/index.es', function(module) {
var Bricks = module.default;
var sizes = [
{ columns: 1, gutter: 0 },
{ mq: '1280px', columns: 3, gutter: 22 }
];
var bricksInstance = Bricks({
container: '.container',
packed: 'data-packed',
sizes: sizes
});
AUI().ready(function(){
bricksInstance.pack();
});
window.addEventListener('resize', function(){
bricksInstance.pack();
}, true);
}, function(error) {
console.error(error);
});
</script></code></pre><br>Cheers Severin</body></html>Severin Rohner2019-03-29T10:25:39ZRE: Use npm scripts with AMD Module Loader in the frontend, e.g. webcontentIván Zaera Avellónhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1119995522019-01-14T08:02:46Z2019-01-14T08:02:46Z<p>Hi Severin:</p>
<p> </p>
<p>You can leave it as it is, it should work. However, the config
generator is deprecated in favor of the new npm bundler. You can see
the docs for the new tool here ->
https://github.com/liferay/liferay-npm-build-tools/wiki and here -> https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/using-npm-in-your-portlets</p>
<p> </p>
<p>Please carefully read the documentation until you understand the new
model and feel free to ask any doubt you may have here.</p>
<p> </p>
<p>Cheers,</p>
<p>Ivan</p>
<p> </p>Iván Zaera Avellón2019-01-14T08:02:46ZUse npm scripts with AMD Module Loader in the frontend, e.g. webcontentSeverin Rohnerhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1119901992019-01-11T14:57:00Z2019-01-11T14:57:00Z<h1>Working code in Liferay 7.0</h1>
<p>In Liferay 7.0 we created an OSGI module with the JS code of a JS library.</p>
<p>The code is copy paste from the dist to the file 'workspace/modules/dep-bricks/src/main/resources/META-INF/resources/Bricks.es.js'</p>
<p>With following code in the build.graldes file:</p>
<pre>
dependencies {
compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "2.0.0"
compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "2.0.0"
compileOnly group: "javax.servlet", name: "javax.servlet-api", version: "3.0.1"
compileOnly group: "jstl", name: "jstl", version: "1.2"
compileOnly group: "org.osgi", name: "osgi.cmpn", version: "6.0.0"
}
configJSModules {
configVariable = ""
ignorePath = false
moduleExtension = ""
moduleFormat = "/_/g,-"
include "**/*.js*"
}</pre>
<p> </p>
<p>In the webcontent template we used this javascript code to load the
bicks.js library, to load it only, if we need it.</p>
<pre>
require('key-dep-bricks/Bricks.es', function(module) {
var Bricks = module.default
var bricksInstance = Bricks({
....
})
})
</pre>
<p> </p>
<h1>How to solve in Liferay 7.1</h1>
<p>With Liferay 7.1.1 ga2 we get the new module loader (> V2.0.0)</p>
<p>
<strong>Does anyone know how we have to create such dependencies
module with the new module loader and how to consume it in the front end.</strong></p>
<p>
<strong>Is it possible to use a npm dependency directly in the
JavaScript require function, just with add it to the package json.</strong></p>
<p> </p>
<p>As is saw in the documentation, there is the <a
href="https://dev.liferay.com/de/develop/tutorials/-/knowledge_base/7-1/using-the-npmresolver-api-in-your-portlets">NPMResolver</a>,
but how can I use this, if I don't like to create a portlet, because I
will use the dependency in the theme or freemarker t