現代JavaScript發展概述
這是一篇觀後感，對原文進行了翻譯和總結。
概述前端生態的發展史 + 發展過程種遇到的各種問題 + 解決問題所使用的工具。
原文：Modern JavaScript Explained For Dinosaurs
1. 早期通過html、css、js即可創建一個網頁
這個階段需要我們手動的引入js和樣式文件。
優點： 簡單易懂。
缺點：引用的插件每次版本更新後，都需要手動下載新版本文件。
2. 使用js包管理器( npm )：
npm init
創建 package.json 文件，然後通過 npm install 安裝依賴(eg：moment.js )，這樣就可以在 node_modules 文件夾中找到 moment.min.js 文件。在index文件中手動引入 moment.min.js。
優點：解決了手動更新版本的問題，可以通過命令行進行更新。
缺點：在 node_modules 文件夾中找到所需插件的位置，然後將路徑引入到 index.html 不方便。
3. 使用靜態模塊打包器(module bundler) webpack：
大多數編程語言都提供了可以將代碼從一個文件引入到另一個文件的方法，但是由於一開始JS是被設計爲在瀏覽器上運行，所以爲了安全JS被設計爲沒有權限訪問客戶端文件系統。所以很長一段時間裏需要通過定義全局變量的方式，讓JS代碼可以在多個文件中使用。以 moment.js 爲例子，需要將 moment.min.js 載入html，它定義了一個全局變量 moment，允許 moment.min.js 後加載的文件使用它(不管後面的文件是否需要)。
2009年發起了一個名爲 CommonJS 的項目，目的就是建立一個瀏覽器外的JS生態。CommonJS 很大一部分是模塊規範，它允許 JS 像其他編程語言一樣，不通過定義全局變量就可以在文件之間引用代碼。
CommonJS模塊化 最出名的實現就是 node.js。由於 node.js 是用於服務端，所以允許訪問計算機的文件系統。使用 node.js modules 就可以不用將路徑引入 html 來加載，並且 node.js 知道每個 npm 模塊所在地址，所以可以通過 require('moment') 來引入 moment。
但是如果你試圖在瀏覽器上使用上述代碼，會報錯：require is not defined。這是因爲瀏覽器沒有權限訪問文件系統。這時就需要 靜態模塊打包器(module bundler) ，JS靜態模塊打包器 是在 build step 時(此時可以訪問文件系統)創建一個瀏覽器兼容的文件(不需要訪問文件系統)。此時，我們需要 靜態模塊打包器找到所有的 require 聲明，並使用真實的請求文件內容將其進行替換。最終可以得到一個JS包文件(沒有require聲明)。
4. 爲新語言功能轉義代碼(babel)：
轉義代碼指的是將一種語言的代碼轉化爲另一種相似的語言的代碼。這對前端很重要，因爲瀏覽器添加新功能的速度很慢，創建出來的新語言可以將試驗性的特性轉化爲瀏覽器兼容的語言。
CSS有Sass，Less等。JS之前流行CoffeeScript(2010年發佈)，現在更多人使用 babel 或者 TS。Babel 不是一種新語言，而是一個轉譯器，可以將下一個版本的JS特性轉換成被瀏覽器更好兼容的版本(ES5)。TS是一種與下一代JS基本相同的語言，但增加了可選的靜態類型。
webpack 使用 babel：https://webpack.js.org/loaders/babel-loader/#root
npm install @babel/core @babel/preset-env babel-loader --save-dev
使用 exculde 將 node_modules 文件夾裏的 .js文件排除
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}]
}
這樣就可以使用 ES6 新特性了，到這裏我們就完成了大部分，還有些優化，比如：代碼壓縮、代碼變更後 webpack 更新等。
5. 使用任務執行器(task runner)(npm script)：
我們通過 build step來實現JS模塊化，我們需要一個 任務執行器(task runner)，來實現 build 的自動化流程。對前端來說，tasks 包括代碼壓縮、圖片優化、代碼測試等。
在2013年，Grunt 是最流行的前端任務執行器(task runner)，緊接着是 Gulp，兩者都依賴於包裝了其他命令行工具的插件。現在更多使用 npm包管理器 內置的腳本功能。
我們可以在 package.json 文件中 “scripts”裏編輯命令：
"scripts": {
"build": "webpack --progress --mode=production"
}
命令行輸入 npm run build，
就會根據 配置文件webpack.config.js 執行 webpack（也可以使用 –config + 配置文件 來更改配置文件），–progress顯示百分比 ，–mode=production 壓縮代碼。
我們可以注意到 scripts 中執行 webpack 時，地址沒有寫全稱：./node_modules/.bin/webpack。這是因爲 node.js 知道每個 npm包 的地址。
我們還可以引入 webpack-dev-server，可以使修改和保存代碼後，瀏覽器自動加載編譯後的代碼
總結：
這就是現代JS的發展歷程，我們從最開始的 HTML 和 JS 到使用 包管理器 來自動下載第三方包、使用 靜態模塊打包器 生成單個腳本文件、通過 轉譯器 使用JS新特性、使用 任務執行器（task runner） 實現自動化構建。