MomentJS - 環境搭建

本章節將詳細講解如何在本地計算機上設定 MomentJS 的工作環境。在開始使用 MomentJS 之前，您需要訪問該庫。您可以透過以下任何方法訪問其檔案：

方法一：在瀏覽器中使用 MomentJS 檔案

這種方法需要從 MomentJS 官方網站獲取 MomentJS 檔案，並直接在瀏覽器中使用。

步驟一

第一步，訪問 MomentJS 官方網站 https://momentjs.com 您將看到如下所示的首頁：

可以看到，有一個下載選項可以獲取最新的 MomentJS 檔案。請注意，該檔案有壓縮和未壓縮版本。

步驟二

現在，在 `script` 標籤內包含 `moment.js` 檔案，並開始使用 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` 標籤中，並使用您選擇的不同語言環境。您可以使用以下程式碼：

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

為了更好地理解，這裡給出了一個 `moment-locale` 的可執行例子及其輸出：

線上演示

<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>

輸出

方法二：使用 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);

現在，在命令提示符中，執行命令 `node test.js`，如下圖所示：

請注意，此命令顯示 `moment().toString()` 的輸出。

方法三：使用 Bower

Bower 是另一種獲取 MomentJS 所需檔案的方法。您可以使用以下命令使用 Bower 安裝 MomentJS：

bower install --save moment

下圖顯示了使用 Bower 安裝 MomentJS 的過程：

以下是 Bower 載入用於安裝 MomentJS 的檔案。已安裝的 moment 和 locale 檔案如下圖所示：

列印頁面