Including ES5 libs in ionic with ES6?

Ionic Framework ionic-v3
1

I would like to know with the current build system of ionic 2 how would we include third party libs made with ES5, here’s the example:

I want to use moment.js inside a component, but the code is in ES5, how do i include it in my component?

I saw something like this:

import * as moment from ‘moment’;

This doesn’t breaks but it doesn’t expose the api as the docs show them to us, maybe including the script in the index.html with a script tag? but then what happens when you compile, will that file in node_modules be still avaliable?

1 Like
2

Allow me to answer to my own question, after playing with ionic 2 modules and google i managed to import it as expected with:

var moment = require('moment');

Which in turn should be equivalent to, but it isn’t:

import * as moment from 'moment';
1 Like
3

The “correct” way to handle it (if you’re working with a ts app) is to include a relevant d.ts file in the build path. You can find moment.js’s d.ts file here. If you’re wanting to keep files like this out of your VCS you can use the tsd but it adds yet another package management system. If you’re just needing the one package pulling it down may be easier.

Once you have it in your workspace, add it to your tsconfig.json file in the files section like this:

"files": [
   "www/app/app.ts",
   "typings/jssha/jssha.d.ts"
 ],

A d.ts file provides typescript typing information to the js files- basically it lets the ts compiler know how to work with the file. In general you can leave it off but you won’t get intellisense and you will see ts build errors, but the application /probably/ still includes the file.

1 Like
4

Sorry about this, i found how to do it, i use it like this:

import moment from ‘moment’;

This way it imports the default export in moment repo as a moment variable, if it were to use the brackets version:

import {moment} from ‘moment’;

It would search for the moment export which doesn’t exist, the moment repo exports moment as it’s default exports.

The next one shows output different because the import doesn’t go for the exported var but imports all of the code base:

import * as moment from ‘moment’;

All of this is possible because the code from moment is transpiled from ES6 to ES5.

1 Like