Message Boards

Use npm scripts with AMD Module Loader in the frontend, e.g. webcontent

Severin Rohner, modified 5 Years ago.

Use npm scripts with AMD Module Loader in the frontend, e.g. webcontent

Junior Member Posts: 43 Join Date: 1/28/14 Recent Posts

Working code in Liferay 7.0

In Liferay 7.0 we created an OSGI module with the JS code of a JS library.

The code is copy paste from the dist to the file 'workspace/modules/dep-bricks/src/main/resources/META-INF/resources/Bricks.es.js'

With following code in the build.graldes file:

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*"
}

In the webcontent template we used this javascript code to load the bicks.js library, to load it only, if we need it.

require('key-dep-bricks/Bricks.es', function(module) {
    var Bricks = module.default
    var bricksInstance = Bricks({
        ....
    })
})

How to solve in Liferay 7.1

With Liferay 7.1.1 ga2 we get the new module loader (> V2.0.0)

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.

Is it possible to use a npm dependency directly in the JavaScript require function, just with add it to the package json.

As is saw in the documentation, there is the NPMResolver, 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 template?

Thanks for your help.

Cheers Severin

Ivan Zaera, modified 5 Years ago.

RE: Use npm scripts with AMD Module Loader in the frontend, e.g. webcontent

Regular Member Posts: 119 Join Date: 10/1/13 Recent Posts

Hi Severin:

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

Please carefully read the documentation until you understand the new model and feel free to ask any doubt you may have here.

Cheers,

Ivan

Severin Rohner, modified 5 Years ago.

RE: Use npm scripts with AMD Module Loader in the frontend, e.g. webcontent

Junior Member Posts: 43 Join Date: 1/28/14 Recent Posts

Hi Ivan

Thanks for your answer and sorry for my late response.

It works great with the new module loader.

I just added the dependency in the package.json:

{
  "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"
}

and export the bricks.js in the index.es.js:

import Bricks from 'bricks.js'

export default Bricks

In the frontend (e.g. Freemarker template) it can be used in this way

<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>

Cheers Severin