MomentJS - Pendahuluan
Dalam bab ini, kita akan membahas cara bekerja dengan MomentJS using RequireJS dan MomentJS and TypeScript.
MomentJS dan RequireJS
Untuk memahami cara kerja MomentJS menggunakan RequireJS, mari kita analisis contoh kerja dengan MomentJS dan RequireJS. Struktur folder dari aplikasi yang sesuai ditunjukkan pada gambar berikut -
Anda bisa mendapatkan file require.js yang diambil dari situs resmi RequireJS -https://requirejs.org/docs/download.html. Perhatikan kode berikut untuk pemahaman yang lebih baik -
Contoh 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>
<div id="datedisplay" style="font-size:25px;"></div>
</body>
</html>main.js
require.config({
paths:{
'momentlocale':'libs/momentlocale',
},
});
require(['momentlocale'], function (moment) {
moment.locale('fr');
var a = moment().format("LLLL");
document.getElementById("datedisplay").innerHTML = a;
});Catat itu Moment.js dan momentlocale.js berada di dalam folder libs.
Berikut ini adalah keluaran untuk project.html yang akan Anda amati di browser -
MomentJS dan TypeScript
Kode yang digunakan untuk membangun proyek MomentJS dan Typecript seperti yang diberikan di bawah ini -
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": "",
"license": "ISC"
}Perhatikan bahwa dependensi tersedia di package,json perlu diinstal menggunakan npm install.
main.ts
import * as moment from 'moment';
let now = moment().format('LLLL');
document.getElementById("datedisplay").innerHTML = now;Kamu butuh use Gulp untuk membangun file dari skrip ketikan ke JavaScript, yaitu dari main.ts untuk main.js. Kode berikut menunjukkangulpfile.js yang digunakan untuk membangun file. Perhatikan bahwa kami telah menggunakangulp-connect paket yang membuka server lokal untuk menampilkan 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',
livereload: true
});
});Ini adalah output yang Anda amati ketika Anda menjalankan kode yang diberikan di atas -
Anda dapat melihat struktur folder seperti yang ditunjukkan dalam format berikut -
Kode untuk index.html ditunjukkan di bawah ini -
<html>
<head></head>
<body>
<h1>MomentJS and typescript</h1>
<div id="datedisplay" style="font-size:30px;"></div>
<script src="build/main.js"></script>
</body>
</html>Sekarang, jika Anda membuka http://localhost:8080/, Anda dapat melihat hasilnya seperti yang ditunjukkan di bawah ini -
