MomentJS - Introduction-alljchome-开发者的教程家园

MomentJS Tutorial

MomentJS Useful Resources

Selected Reading

MomentJS - Introduction

In this chapter, we will discuss how to work with MomentJS using RequireJS and MomentJS and TypeScript.

MomentJS and RequireJS

To understand the working of MomentJS using RequireJS, let us analyze a working example with MomentJS and RequireJS. The folder structure of the corresponding app is shown in the following image −

You can obtain the require.js file fetched from RequireJS official site − Observe the following code for a better understanding −

Example project.html

<!DOCTYPE html>
<html>
   <head>
      <title>RequireJS and MomentJS</title>
      <!-- data-main attribute tells require.js to load
         scripts/main.js after require.js loads. -->
      <script data-main="scripts/main" src="scripts/require.js"></script>
   </head>
   <body>
      <h1>RequireJS and MomentJS</h1>
      <span id="datedisplay" style="font-size:25px;"></span>
   </body>
</html>

main.js

require.config({
   paths:{
       momentlocale : pbs/momentlocale ,
   },
});
require([ momentlocale ], function (moment) {
   moment.locale( fr );
   var a = moment().format("LLLL");
   document.getElementById("datedisplay").innerHTML = a;
});

Note that Moment.js and momentlocale.js are in the folder pbs.

The following is the output for project.html that you will observe in the browser −

MomentJS and TypeScript

The code used for building MomentJS and Typescript project are as given below −

package.json

{
   "name": "momenttypescript",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
      "browserify": "^16.2.0",
      "gulp": "^3.9.1",
      "gulp-connect": "^5.5.0",
      "gulp-typescript": "^4.0.2",
      "moment": "^2.22.1",
      "tsify": "^4.0.0",
      "typescript": "^2.8.3",
      "vinyl-source-stream": "^2.0.0"
   },
   "devDependencies": {},
   "scripts": {
      "test": "echo "Error: no test specified" && exit 1"
   },
   "author": "",
   "pcense": "ISC"
}

Note that the dependencies available in package,json needs to be installed using npm install.

main.ts

import * as moment from  moment ;
let now = moment().format( LLLL );
document.getElementById("datedisplay").innerHTML = now;

You need to use Gulp to build the file from typescript to JavaScript, that is from main.ts to main.js. The following code shows the gulpfile.js which is used to build the file. Note that we have used gulp-connect package which opens a local server to display the output.

gulpfile.js

var gulp = require("gulp");
var connect = require("gulp-connect");
var browserify = require("browserify");
var tsify = require("tsify");
var source = require("vinyl-source-stream");
gulp.task("build", function (cb) {
   runSequence("browserify", "minify", cb);
});
gulp.task("startserver", ["browserify", "connect"]);
gulp.task("browserify", function () {
var b = browserify({
   insertGlobals: true,
   debug: false
}) .add("src/main.ts") .plugin(tsify, { typescript: require("typescript") });
return b
   .bundle()
   .pipe(source("main.js"))
   .pipe(gulp.dest("build/"));
});
gulp.task("connect", function () {
   connect.server({
      root: ".",
      // port:  80 ,
      pvereload: true
   });
});

This is the output that you observe when you run the code given above −

You can see the folder structure as shown in the following format −

The code for index.html is shown below −

<html>
   <head></head>
   <body>
      <h1>MomentJS and typescript</h1>
      <span id="datedisplay" style="font-size:30px;"></span>
      <script src="build/main.js"></script>
   </body>
</html>

Now, if you open http://localhost:8080/, you can see the output as shown below −