MomentJS - การตั้งค่าสภาพแวดล้อม

ในบทนี้คุณจะได้เรียนรู้รายละเอียดเกี่ยวกับการตั้งค่าสภาพแวดล้อมการทำงานของ MomentJS บนเครื่องคอมพิวเตอร์ของคุณ ก่อนที่คุณจะเริ่มทำงานกับ MomentJS คุณต้องมีสิทธิ์เข้าถึงไลบรารี คุณสามารถเข้าถึงไฟล์ได้ด้วยวิธีการใด ๆ ต่อไปนี้ -

วิธีที่ 1: การใช้ไฟล์ MomentJS ในเบราว์เซอร์

ในวิธีนี้เราจะต้องใช้ไฟล์ MomentJS จากเว็บไซต์ทางการและจะใช้โดยตรงในเบราว์เซอร์

ขั้นตอนที่ 1

ขั้นแรกไปที่เว็บไซต์ทางการของ MomentJS https://momentjs.comคุณจะพบโฮมเพจดังที่แสดงไว้ที่นี่ -

สังเกตว่ามีตัวเลือกการดาวน์โหลดซึ่งให้ไฟล์ MomentJS ล่าสุดแก่คุณ โปรดทราบว่าไฟล์สามารถใช้ได้ทั้งแบบและไม่มีการย่อขนาด

ขั้นตอนที่ 2

ตอนนี้รวม moment.js ข้างใน scriptแท็กและเริ่มทำงานกับ MomentJS สำหรับสิ่งนี้คุณสามารถใช้รหัสที่ระบุด้านล่าง -

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>

ให้นี่คือตัวอย่างการทำงานและผลลัพธ์เพื่อความเข้าใจที่ดีขึ้น -

ตัวอย่าง

<html>
   <head>
      <title>MomentJS - Working Example</title>
      <script type = "text/JavaScript" src = "https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <div style = "font-size:25px" id = "todaysdate"></div>
      <script type = "text/JavaScript">
         var a = moment().toString();
         document.getElementById("todaysdate").innerHTML = a;
      </script>
   </body>
</html>

เอาต์พุต

moment-localeไฟล์ที่จะทำงานกับภาษาต่างๆก็มีให้เช่นกันดังที่แสดงในภาพหน้าจอด้านบน ตอนนี้เพิ่มไฟล์ลงในแท็กสคริปต์ดังที่แสดงด้านล่างและทำงานกับภาษาต่างๆที่คุณเลือก สำหรับสิ่งนี้คุณสามารถใช้รหัสที่ระบุด้านล่าง -

<script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>

ให้นี่เป็นตัวอย่างการทำงานสำหรับโมเมนต์โลแคลและผลลัพธ์เพื่อความเข้าใจที่ดีขึ้น -

<html>
   <head>
      <script type = "text/JavaScript" src ="https://MomentJS.com/downloads/moment-with-locales.js"></script>
   </head>
   <body>
      <h1>Moment Locale</h1>
      <div id = "datedisplay" style = "font-size:30px;"></div>
      <script type = "text/JavaScript">
         var a = moment.locale("fr");
         var c = moment().format("LLLL");
         document.getElementById("datedisplay").innerHTML = c;
      </script>
   </body>
</html>

เอาต์พุต

วิธีที่ 2: การใช้ Node.js

หากคุณเลือกใช้วิธีนี้ตรวจสอบให้แน่ใจว่าคุณมี Node.js และ npmติดตั้งในระบบของคุณ คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้ง MomentJS -

npm install moment

คุณสามารถสังเกตผลลัพธ์ต่อไปนี้เมื่อติดตั้ง MomentJS สำเร็จ -

ตอนนี้เพื่อทดสอบว่า MomentJS ทำงานได้ดีกับ Node.js หรือไม่ให้สร้างไฟล์ test.js และเพิ่มรหัสต่อไปนี้ -

var moment = require('moment');
var a = moment().toString();
console.log(a);

ตอนนี้ในพรอมต์คำสั่งเรียกใช้โหนดคำสั่ง test.js ดังที่แสดงในภาพหน้าจอด้านล่าง -

โปรดสังเกตว่าคำสั่งนี้แสดงผลลัพธ์สำหรับ moment().toString().

วิธีที่ 3: การใช้ Bower

Bower เป็นอีกวิธีหนึ่งในการรับไฟล์ที่ต้องการสำหรับ MomentJS คุณสามารถใช้คำสั่งต่อไปนี้เพื่อติดตั้ง MomentJS โดยใช้ Bower -

bower install --save moment

ภาพหน้าจอด้านล่างแสดงการติดตั้ง MomentJS โดยใช้ Bower -

นี่คือไฟล์ที่โหลดจาก Bower เพื่อให้ MomentJS ติดตั้ง ไฟล์ช่วงเวลาและสถานที่ที่ติดตั้งจะแสดงในภาพด้านล่าง -