How to include a plain js library in Ionic typescript project?

Ionic Framework ionic-v3
1

Hi, I think I still sadly still don’t understand how typescript/browserfy work together to include the actual js files into app.bundle.js in the Ionic 2 build.

This time I want to use a library that has no type definition file (mqtt.js). I have installed the js library and see it in the node_modules.

Within the node_modules/mqtt/lib.client.js file, there is an export at the end…

module.exports = MqttClient;

So I want to use this MqttClient in one of my pages.

After Building the app, when I look into app.bundle.js I do not see MqttClient anywhere.

In tsconfig.json I have attempted to include the above file…

 "filesGlob": [
  "**/*.ts",
  "!node_modules/**/*",
  "node_modules/mqtt/lib/client.js"   <- added this
  ],

but I still don’t get it.

I thought that browserfy would scan the node_modules and read each package,json file, but now not so sure.

Can anyone shine some light on how I can include just the pure js libraries, and then how to import and use them in my typescript files. I have searched for hours looking for this but to no avail.
Thanks in advance for any help!

[UPDATE]
I added 'node_modules/mqtt/mqtt.js'into ionic-gulp-browserify-typescript folder index.js as below

var defaultOptions = {
   watch: false,
   src: ['./app/app.ts', './typings/index.d.ts', 'node_modules/mqtt/mqtt.js'],
   outputPath: 'www/build/js/',
  ....

At the bottom if the library file, mqtt.sj, we have the following

       // Expose MqttClient
       module.exports.MqttClient = MqttClient;
       module.exports.Client = MqttClient;
       module.exports.Store = Store;

       // Expose servers
       module.exports.Server = MqttServer;
       module.exports.MqttServer = MqttServer;
       module.exports.SecureServer = MqttSecureServer;
       module.exports.MqttSecureServer = MqttSecureServer;

Now when I look into app.bundle.js I do see module.exports.MqttClient = MqttClient; I do not see MqttServer

I still don’t seem to be able to import this into my .ts page file though, so still not sure what to do here.

I can add ///<reference path="../../../node_modules/mqtt/mqtt.js" /> and this seems to resolve ok, but I cannot find how to import,

e.g. import * as mqtt from 'mqtt/mqtt'; typescript reports “'cannot find module mqtt/mqtt”.

If I try something like let client = new MqttClient(); MqttClient is always undefined.

Also, is the above the correct place to add js files?

2

I am sorry I don’t have an answer.

Hopefully this will bump the question up for a resolution.

I too am struggling to import a js library that does not have type definitions file.

Hopefully one of our questions can be resolve.

Good luck

3

Include the library in index.html, define the object it creates in your .ts file with something similar to declare var window: any;.

4

Instead of

Try
import * as mqtt from 'mqtt'