摘要：首先，我們需要安裝選項(xiàng)表示模塊時(shí)開發(fā)環(huán)境中需要的依賴庫，而生產(chǎn)環(huán)境中并不需要。首先，我們需要安裝我們一共安裝了個(gè)模塊是的核心部分定義了轉(zhuǎn)碼規(guī)則是的插件。年時(shí)，是最流行的任務(wù)管理工具，其次是。修改，即可配置我們定義了個(gè)，即和。

譯者按： JavaScript開發(fā)要用到的工具越來越多，越來越復(fù)雜，為什么呢？你真的弄明白了嗎？

原文: Modern JavaScript Explained For Dinosaurs

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

如果你不是老司機(jī)，面對眾多JavaScript開發(fā)工具，也許會有些搞不清楚狀況。因?yàn)椋琂avaScript的生態(tài)系統(tǒng)在迅速的變化，新手很難理解這些工具的功能以及它們所解決的問題。對此，我深有體會。

我是1998開始編程的，但是我直到2014才開始學(xué)習(xí)JavaScript。當(dāng)我第一次接觸Browserify時(shí)，有這樣一句介紹：

通過將依賴打包，Browserify讓你可以在瀏覽器中使用require(‘modules’)

當(dāng)時(shí)，我完全無法理解這句話，也不知道Browserify到底有什么用。

這篇博客將從歷史演進(jìn)的角度，告訴大家今天的JavaScript開發(fā)工具是怎樣發(fā)展而來，以及它們到底有什么作用。首先，我們將介紹一個(gè)非常簡單的網(wǎng)頁示例，它是由最原始的HTML與JavaScript寫的。然后，我們會逐步介紹不同的工具，它們可以解決不同的問題。

最原始的網(wǎng)頁，是用HTML和JavaScript編寫的，沒有那么多幺蛾子。不過，我們需要手動下載并載入依賴的JavaScript文件。如下，index.html中載入1個(gè)JavaScript文件：

  
  
  


  
Hello from HTML!

載入了同目錄的index.js文件：

// index.js
console.log("Hello from JavaScript!");

這樣，一個(gè)簡單的網(wǎng)頁就寫好了！

現(xiàn)在，假設(shè)你需要使用一個(gè)第三方庫比如moment.js，這個(gè)庫可以幫助我們處理時(shí)間數(shù)據(jù)。比如：

moment().startOf("day").fromNow();        // 20 hours ago

我們需要在的官網(wǎng)下載moment.min.js，放到同一個(gè)目錄中，然后在index.html中載入：

  
  
  
  
  


  
Hello from HTML!

可知，moment.min.js先于index.js載入，這樣我們就可以在index.js中調(diào)用moment了：

// index.js
console.log("Hello from JavaScript!");
console.log(moment().startOf("day").fromNow());

總結(jié): 直接使用HTML和JavaScript庫編寫網(wǎng)頁非常簡單，也很容易理解；然而，當(dāng)JavaScript庫更新時(shí)，我們需要手動下載并載入新版本，這樣確實(shí)很煩...

大概2010開始，數(shù)個(gè)JavaScript包管理工具誕生了，它們旨在通過一個(gè)中央倉庫，使得下載和更新JavaScript庫更加自動化。2013年時(shí)，Bower可能是最流行的；到了2015年， npm逐漸占據(jù)統(tǒng)治地位；而2016年，yarn開始逐漸引起關(guān)注，但是它的底層是基于npm的。還有一點(diǎn)，npm最初是為node.js開發(fā)的，并不是為了前端。因此，使用npm管理前端的依賴庫顯得有點(diǎn)奇怪。

現(xiàn)在，我們來看看如何使用npm安裝moment.js吧。

如果你已經(jīng)安裝了nodejs，則npm也應(yīng)該安裝好了。這時(shí)，進(jìn)入index.html所在目錄，執(zhí)行以下命令：

$ npm init

終端會出現(xiàn)數(shù)個(gè)問題，僅需使用enter鍵選擇默認(rèn)配置就好了。命令執(zhí)行之后，會生成一個(gè)package.json文件，npm使用這個(gè)文件保存所有的項(xiàng)目信息。默認(rèn)的package.json是這樣的:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

使用一下命令，即可安裝moment.js:

$ npm install moment --save

這個(gè)命令會做兩件事情：首先，它會下載moment.js，將其保存到node_modules目錄中；然后，它會更新package.json，保存moment安裝信息。

{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  }
}

這樣，當(dāng)我們需要與其他人分享這個(gè)項(xiàng)目時(shí)，就不需要將node_modules發(fā)送給對方了，而只需要給它package.json文件，因?yàn)樗梢允褂?b>npm install安裝所有依賴庫。

moment.min.js文件位于node_modules/moment/min目錄中，因此我們可以在index.html中直接載入moment.min.js：

  
  
  
  


  
Hello from HTML!

總結(jié)： 現(xiàn)在，我們不需要手動下載moment.js了，而可以通過npm自動下載以及更新，這樣方便很多；但是，我們需要在node_modules中找到對應(yīng)的JS文件，然后將它載入HTML，這樣很不方便。

順便分享一個(gè)好東西： 如果你需要監(jiān)控線上JavaScript代碼的錯(cuò)誤的話，歡迎免費(fèi)使用Fundebug!

大多數(shù)編程語言都提供了模塊管理功能，可以在一個(gè)文件中導(dǎo)入另一個(gè)文件的代碼。然而，JavaScript最初并沒有支持這種方式。很長時(shí)間以來，組織多個(gè)JavaScript文件的代碼時(shí)，需要使用全局變量。我們在載入moment.min.js時(shí)，實(shí)際上也定義了一個(gè)moment全局變量，因此所有之后載入的JS文件，都可以使用它。

2009年，一個(gè)叫做CommenJS的項(xiàng)目出現(xiàn)了，它為JavaScript模塊化定義了一個(gè)規(guī)范，從而允許JavaScript能夠和其他編程語言一樣在不同文件中引入模塊。Node.js是支持CommenJS規(guī)范的，它可以使用require直接引用模塊：

// index.js
var moment = require("moment");

console.log("Hello from JavaScript!");
console.log(moment().startOf("day").fromNow());

這樣寫非常方便，然而，如果你在瀏覽器中執(zhí)行上面的代碼，則會收到報(bào)錯(cuò)，因?yàn)?require未定義"。

這時(shí)，我們就需要打包工具了，它們可以將源代碼構(gòu)建成為兼容瀏覽器的代碼，來避免上面提到的問題。簡單地說，打包工具可以找到所有require語句，然后將它們替代為各個(gè)JS文件中代碼，最終生成的一個(gè)多帶帶的JS文件。

Browserify是2011年發(fā)布，曾經(jīng)是最流行的打包工具；到了2015年， webpack逐漸成為了最主流的打包工具。

現(xiàn)在，我們來看看如何讓require("moment")可以在瀏覽器中執(zhí)行。首先，我們需要安裝webpack：

$ npm install webpack --save-dev

--save-dev選項(xiàng)表示webpack模塊時(shí)開發(fā)環(huán)境中需要的依賴庫，而生產(chǎn)環(huán)境中并不需要。package.json更新之后是這樣的：

{
  "name": "modern-javascript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "moment": "^2.19.1"
  },
  "devDependencies": {
    "webpack": "^3.7.1"
  }
}

使用一下命令運(yùn)行webpack：

$ ./node_modules/.bin/webpack index.js bundle.js

bundle.js為生成的打包文件，可以直接在瀏覽器中使用：

  
  
  


  
Hello from HTML!

每次修改index.js之后，我們都需要執(zhí)行webpack。webpack的命令比較長，這樣很麻煩，尤其是我們需要使用一些高級選項(xiàng)時(shí)。這時(shí)，我們可以將webpack的配置選項(xiàng)寫入webpack.config.js文件：

// webpack.config.js
module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js"
  }
};

這樣，我們直接運(yùn)行wepack，而不需要指定任何配置選項(xiàng)，就可以進(jìn)行打包了：

$ ./node_modules/.bin/webpack

總結(jié)： 使用打包工具之后，對于第三方JS庫，我們不再需要在HTML中使用

版權(quán)聲明:
轉(zhuǎn)載時(shí)請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/11/29/history-of-javascript-tools/