How to use `moment.js` with Meteor?

2019-01-15 07:56发布

问题:

I am wanting to use momentjs with meteor. This is an npm package, so from what I understand, it cannot be used with meteor because meteor uses it's own package system. So here are my questions:

  • Does anyone know of a way to use momentjs with meteor?
  • Is there a way to use npm packages with meteor?

2017 EDIT: As of Meteor 1.4+, npm package management allows for standard imports of npm modules and named imports of Atmosphere modules.

回答1:

For stand-alone js libraries like moment.js, validate.js, underscore.string.js, etc. you can just drop the source file into your lib folder. I use client/lib for libraries which will be used only on the client (like validate.js), and lib for libraries which could be used by both the client and the server (like moment.js).

If you use meteorite, you can take advantage of the atmosphere packages. Some of what you are looking for for may be in there.

Using npm modules from meteor is something a lot of people ask about (for good reason). You can see some notes here, though I heard first hand that the way meteor talks to npm packages is about to change significantly.



回答2:

Tyler, i had the same question and for sure many people where trying to find the right answer as soon as possible because this is a easy thing to do even though the people that are using meteor for the first time (as me) have this kind of questions...

Meteor Package Management

First of all we will wont be using NPM we will be using 'Meteor' which is been used from the Meteor Package Management AtmosphereJS Also, you will find other amazing packages here...

So lets start

Open your terminal and go directly where your App is, yo have to install the right dependencies to do so do this:

Install the only dependency

This will work with Meteor 1.*

 meteor add momentjs:moment

Compile your app (You can do it now or later)

This will add that package to your App, after that compile it again with

meteor

And go to any file inside of your isClient whichi is this

if (Meteor.isClient) {   }

and you can use the 'moment' method in the same way like they show on their website MomentJs!

Example

to give you an example, this is how i'm using in my meteor app

moment(dateToPass).fromNow();

because i'm using Mongo the original Data looks like this.

"createdAt" : ISODate("2014-12-12T04:01:21.768Z")

i'll have to do a Simple find query to get it your data and then you can handle your data like this (This code will give you an idea of how i'm using the CreatedAt value that holds a Date() to use it with MomentJS)

var theItemsOnTheArray = SomeArray.find();
var dateToPass;
theItemsOnTheArray.forEach(function (item) { dateToPass = item.createdAt });
return moment(dateToPass).fromNow();

The result will be

// 3 years ago
// 2 years ago
// 21 hours ago
// in 3 hours
// 5 minutes ago

Instead of:

Thu Dec 11 2014 20:14:08 GMT-0800 (PST)

I hope its useful for any of you, if you think it has valuable info please +1 ;) thanks!



回答3:

The question was asked 3 years ago, at that time there was no official package from atmosphere. Since the question was asked things changed and I point out when the package was added to meteor repos.

Install the official package from atmosphere

meteor add momentjs:moment

if you are using typescript, just

import * as moment from "moment/moment";

then in your code

let date = moment(<some date>).format('YYYY MM DD');


回答4:

2017 UPDATE - Meteor 1.4+ uses npm modules with ES6. OP is from 2013.

Thus...

The npm-only way:

install moment to your meteor project with npm and import in this manner...

$ cd /path/to/my/meteor/project
$ npm install --save moment

// inside your Meteor app files...
import moment from 'moment';

The meteor-npm way with a blanket import: (Thx, @Dave Gööck)

$ cd /path/to/my/meteor/project
$ meteor npm install --save moment

// Inside Meteor app...
import * as moment from 'moment';
// OR
import moment from 'moment';

More about Meteor-npm package imports here. (Specifically mentions moment).



回答5:

I had a more complicated issue, because:

  1. I wanted to add 'pl' locale
  2. I needed it to work with TypeScript

I'd love to hear that there is an easier way to accomplish these goals, but here are steps which I did to finally make it work:

Step 1. $ meteor add momentjs:moment

Step 2. download the file https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/moment/moment-node.d.ts and save as in ./typings/moment/moment.d.ts (for some reason just performing typings install dt~moment--global --save will not do the trick, as it will only download an almost empty https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/moment/moment.d.ts file which references the moment-node.d.ts file which contains the real stuff)

Step 3. append the following lines to moment.d.ts:

declare module "meteor/momentjs:moment" {
  var moment: moment.MomentStatic;
}

Step 4. download https://raw.githubusercontent.com/moment/moment/develop/locale/pl.js (or any other locale) and save it in ./client/lib/moment/locale/pl.js (or any other directory below ./client)

Step 5. edit the begining and the end of the ./client/lib/moment/locale/pl.js replacing the loader code with a single line at the begining

import { moment } from 'meteor/momentjs:moment';

Step 6. finally you can use moment js in any of your modules, just append

import { moment } from "meteor/momentjs:moment";

at the begining of a file, and then you can do for example:

moment(ts).locale('pl').format('LLL');

If you are using 'meteor/tap:i18n' package, you might want to use the same language you passed to TAPi18n.setLanguage(...); during startup. You might need to create typings/globals/meteor_tap_i18n.d.ts file with

declare module "meteor/tap:i18n" {
  export var TAPi18n : TAPi18nStatic;
  interface TAPi18nStatic{
     setLanguage(name:string):any;
     getLanguage():string;
     __(name:string,params?:any):string;
  }
}

and then you can use it in your module with

import { TAPi18n } from 'meteor/tap:i18n';
//...
moment(ts).locale(TAPi18n.getLanguage()).format('LLL');