EnyoJS 2.7 Tutorial : 3rd party JS Libraries

Today, we talk about how to bundle third party libraries such as moment.js, taffydb.js to use with Enyo 2.7 project. To bundle, we simply make a thirdparty folder (or what ever name you wanna call it), copy the js file into it. In this tutorial, I’ll just use moment.js from https://momentjs.com/ (a very handy date time formatting library).

As you can see below, I’ve copied the moment.min.js

Placing third party libraries into one folder.

Basically, what happens next, just include(require) them from the folder like this. By linking them, enyo pack will consolidate and pack all the linked third party js into a bundled js file.

  
var Material = require('thirdparty/material.min.js');
var MomentJS = require('thirdparty/moment.min.js');

There are some 3rd party libraries that don’t go along with Enyo Pack due to multiple dependencies issues. LokiJS and KonvaJS for example. For this case, we can use the modify .enyoconfig to omit those js files from bundling into Enyo. Open the .enyoconfig file using a VS Code (or any code editor of your choice). Look for the line…

  
"headScripts": [];

The headScripts properties, is where you want to associate js files to be included in the index.html script tag once the enyo pack command is executed. I normally, would like to create another new folder called “external” and place all my non-bundled js files there.

What we need next, is to link them up in .enyoconfig file. For my case, I’m using konvaJS a canvas framework library.

  
"headScripts": [
     "external/konva/konva.min.js"
  ],

Once packed, have a look at the dist\index.html content, konva.min.js will be included as traditional script tag and you can start using it. 🙂

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *