How to include a plain js library in Ionic 2 typescript project
<p>I have seen similar posts to this, but none have helped me.</p>

<p>I have an ionic 2 project, and am using Typescript 2 (beta)</p>

<p>I thought I was getting there, but sadly I think I still don't understand how Typescript/Browserfy work together to include the actual js files into <code>app.bundle.js</code> in the Ionic 2 build.</p>

<p>This time I want to use the library <a href="https://github.com/mqttjs/MQTT.js/" rel="nofollow" title="mqtt">mqtt</a> that has no type definition file . I have installed the js library and see it in the node_modules.</p>

<p>Near the end of <code>mqtt.js</code> (the file listed as the <code>main</code> attribute in the package.json file of the node package) I see some exports such as </p>

<pre><code>// 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;

// Expose Connection
module.exports.MqttConnection = MqttConnection;
</code></pre>

<p>So I want to use this MqttClient in one of my pages.</p>

<p>When I build I do NOT see this MqttClient in app.bubdle.js</p>

<p>If I add 'node_modules/mqtt/mqtt.js'into ionic-gulp-browserify-typescript folder index.js as below</p>

<pre><code>var defaultOptions = {
  watch: false,
  src: ['./app/app.ts', './typings/index.d.ts', 'node_modules/mqtt/mqtt.js' &lt;--- I added this],
  outputPath: 'www/build/js/',
</code></pre>

<p>Now when I look into app.bundle.js I do see module.exports.MqttClient = MqttClient; I do not see MqttServer (so some of the exports get in app.bundle.js, but not others!</p>

<p><strong>Question 1</strong> is why I don't see all the exports?</p>

<p><strong>Question 2</strong> - the most import question, is, how can I now import/use this in my Ionic page?</p>

<p>I have tried adding (as suggested elsewhere)</p>

<pre><code>  declare var MqttClient: any;
</code></pre>

<p>and then </p>

<pre><code>let client = new MqttClient();
</code></pre>

<p>but MqttClient is always undefined</p>

<p>Do I need to "require" it using a loader? I did think as we are using Typescript / Browserfy that I won't need a loader (eg Systemjs)</p>

<p>Any help greatly appreciated! Completely stumped on what to do here!</p>