前端进化图：

Images from Dinosaur Comics by Ryan North

有时候入门没入好，学习起现代的 JavaScript 开发还是颇有难度的。生态系统太日新月异以至于让人难以理解不同工具的出现究竟是为了解决什么问题。我从 1988 年开始编程，但直至 2014 年才开始认真地学习起 JavaScript。记得那时第一次遇到 Browserify 时看着它的标语：

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

这句话里的单词我一个都看不懂，不知道为什么这个东西会对自己这样一个开发者能有用。

本篇文章的目标便是提供一个有关 JavaScript 工具进化的历史视角，看看它们是怎么一步一步演变到如今 -- 2017 年的这个样子的。开始的开始，我们将像最原始的恐龙家族一样建一个网站 -- 不依赖任何工具，就用最简单的 HTML 和 JavaScript。然后再循序渐进引入不同的工具，看看每个工具分别解决了什么问题。开始吧~

“守旧派”使用 JavaScript 的方法

首先，来像“守旧派”一样使用 HTML 和 JavaScript 来建个网站 -- 手动下载和内联文件。像这样~

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Example</title>
    <script src="index.js"></script>
</head>
<body>
    <h1>Hello from HTML!</h1>
</body>
</html>

<script src="index.js"></script> 这行指的是引入在同一目录下的一个叫做 index.js 的单独文件：

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

这几乎就是你建站需要的一切了~ 现在呢，你想加进去一个其他人写的库，例如 moment.js （一个以可读性更好的方式格式化日期的库）。例如，你可以像这样使用一个 moment 函数：

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

但这是假设你已经在网站中包括了 moment.js 的前提下！在 moment.js 的主页上，你可以看到如下的指南：

Hmm，在 Install 这部分右边貌似有很多东西啊！先无视它 -- 我们可以下载 moment.min.js 文件到同级目录中，并在 index.html 中引入：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <link rel="stylesheet" href="index.css">
  <script src="moment.min.js"></script>
  <script src="index.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

注意 moment.min.js 会在 index.js 之前下载完成，所以你可以在 index.js 中像这样使用 moment 函数：

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

这就是我们怎么利用 JavaScript 库建站！这种方式的好处是非常容易理解。然而坏处是当库的作者更新时，每次寻找和下载新的版本就会很烦。

使用 JavaScript 包管理工具（npm）

大约从 2010 年开始，几个相互竞争的 JavaScript 包管理工具开始出现，来帮人们从中心仓库中自动完成下载和升级的流程。Bower 在 2013 年可以说是最流行的一个了，但最终在 2015 年左右还是被 npm 打败了。（值得一提的是，大约从 2016 年开始，yarn 作为一个可选的 npm 替代开始占据一席之地，但 npm 仍占上风。）

注意到，npm 作为一个包管理工具，最开始是专门为 node.js -- 一个运行在服务器端的 JavaScript 运行时 (runtime) 而准备的，并不是前端。所以选择它作为在浏览器中运行 JavaScript 的前端包管理工具似乎有些奇怪。

注意： 使用包管理工具通常涉及命令行的使用，在以前这并不是一个前端开发者所必须的技能。如果你从未使用过，可以阅读这篇教程概览一番。无论如何，知道如何使用命令行也是现代 JavaScript 开发的一部分（这也是进入其他领域重要的一步）。

让我们看看怎么使用 npm 来自动完成 moment.js 的安装。如果你安装了 node.js，npm 也就已经随之安装了，你可以操纵你的命令行进入 index.html 目录下并输入：

$ npm init

这将会引导你填写几个问题（默认值也可以，你可以一直敲 “Enter” 键）并生成一个叫做 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"
}

要安装 monment.js 包的话，我们可以按照主页上介绍的 npm 安装方法在命令行敲下：

$ npm install moment --save

这行命令做了两件事 -- 第一，它从 moment.js package 下载了所有代码到一个叫 node_modules 的文件夹中。第二，它自动修改了 package.json 文件来追踪 moment.js 作为项目的依赖：

{
 "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"
 }
}

这在和他人共享项目时非常有用 -- 并不需要直接共享 node_modules 文件夹（可能会非常大），你只需要共享你的 package.json 文件，其他开发者便可以使用命令 npm install 自动安装项目所需要的包。

现在，我们不再需要从网站上手动下载 moment.js 了，我们可以使用 npm 自动下载和更新。然后看一下 node_modules 内部，发现 moment.min.js 文件位于 node_modules/moment/min 目录。所以可以把 npm 下载的版本的 moment.min.js 像这样引入 index.html 文件：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScript Example</title>
 <!-- 手动加粗下一行 -->
 <script src="node_modules/moment/min/moment.min.js"></script>
 <script src="index.js"></script>
</head>
<body>
 <h1>Hello from HTML!</h1>
</body>
</html>

所以好消息是我们现在可以通过命令行使用 npm 下载和更新包了。坏消息是我们还得搜寻整个 node_modules 目录来定位每个包的路径再手动添加到我们 HTML 文件中。实在太太不方便了，所以下一步，来看看怎么把这个过程也自动化起来吧。

使用 JavaScript 模块打包工具（webpack）

大多数编程语言都会提供从一个文件导入另一个文件代码的机制。然而 JavaScript 最初设计时并没有这个特性，因为 JavaScript 原本是为了在浏览器端运行而设计的，并没有权限获取计算机客户端的文件系统（安全考虑）。所以很长一段时间以来，组织多个文件的 JavaScript 代码就是把每个文件下载下来，变量是全局共享的。

这实际上和我们刚才对 moment.js 的所做的并无二致 -- 把整个的 moment.min.js 文件下载到 HTML 中，定义了一个全局变量 moment，对于所有在 moment.min.js 之后下载的文件都可用（无论是否真的需要它）。

2009 年，一个叫做 CommonJS 的项目兴起，目标是规范 JavaScript 在浏览器之外的生态系统。CommonJS 中很大的一部分便是对模块系统的规范，允许 JavaScript 像大多数编程语言那样允许导入导出代码而不用借助于全局变量。最知名的对 CommonJS 模块规范的实现便是 node.js。（译者注：Node 在实现中也并非完全按照规范，而是对模块规范进行了一定取舍，同时增加了一些自身需要的特性。）

如前所述，node.js 是为 JavaScript 设计在服务器端的一个运行时。假如让我们用 node.js 模块来重写前面的例子的话，不需要把整个 monment.min.js 文件用 HTML 标签下载下来，你可以直接在 JavaScript 文件中这样加载：

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

然而，这是在 node.js 中才起作用的模块加载方法， node.js 作为一个服务器端语言，有权限访问计算机的文件系统，因此工作良好。Node.js 还知道每个 npm 模块的路径，所以我们不需要写上 require('./node_modules/moment/min/moment.min.js)，而可以直接写 require('moment')-- 是不是很贴心~

对 node.js 来说这一切都很棒，但是如果你真的把上面的代码运行在浏览器中的话，你会得到一个报错 require is not defined`。浏览器没有对文件系统的权限，这就意味着用这种方式加载模块很难搞 -- 文件必须被动态地加载，或者同步地加载（减慢执行速度）或者异步地加载（不能保证时间顺序）。

这就是模块打包器随之出现的原因。JavaScript 模块打包器是一个能在代码构建过程（有文件系统权限）绕过这个问题并打包生产出兼容于浏览器的生产版本（不再需要有文件系统权限）的工具。在这个例子中，我们需要一个模块打包器，找到所有 require 语句（它在浏览器端的 JavaScript 中是非法的）并把它们替换成想 require 的文件实际的内容。最终结果是一个打包后的 JavaScript 文件（没有 require 语句）！

曾经最流行的模块打包器是 Browserify，于 2011 年发布，它倡导在前端使用 node.js 风格的 require 语句（这对 npm 成为前端包管理工具的选择是至关重要的）。2015 年左右，webpack 最终成为更为广泛使用的包管理器（React 的流行大大推动了这一进程，它充分利用了 webpack 的各种特性）。

来看一下怎么用 webpack 让上面的 require('moment') 的例子在浏览器中起作用吧。首先，我们需要把 webpack 安装到项目中。Webpack 本身也是一个 npm 包，所以可以使用命令行愉快地安装：

$ npm install webpack --save-dev

注意到 --save-dev 参数 -- 把它作为开发环境的依赖，而不是生产环境，因为并不需要把它放到服务器上。你可以在 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"
 }
}

现在 webpack 作为一个 node_modules 中的包已经安装好了，可以在命令行中像这样使用 webpack：

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

这行命令将会运行位于 node_modules 中的 webpack 工具，它将从 index.js 开始，找到所有require 语句，把它们替换成合适的代码并输出一个单文件叫 bundle.js 。这意味着我们在浏览器中不再需要 index.js，因为它包含非法的 require 语句。而是使用输出的 bundle.js 文件，因此我们应当修改 index.html 文件：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript Example</title>
  <!-- 手动加粗下一行 -->
  <script src="bundle.js"></script>
</head>
<body>
  <h1>Hello from HTML!</h1>
</body>
</html>

刷新一下浏览器，一切又都像以前一样可以正常工作啦！

注意到每当我们修改 index.js 后都要运行 webpack 一长串的命令。好烦呀，而且当我们使用到 webpack 更高级的特性时就更烦了（例如使用 generating source maps 帮我们从编译后的代码调试原始的代码）。Webpack 可以从项目文件的根目录中的一个叫做 webpack.config.js的配置文件中读取相应设置，在我们的栗子中，差不多应该配置成这样：

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

这样每次我们改变 index.js 后，就可以在命令行中运行：

$ ./node_modules/.bin/webpack

我们不需要再特意指出 index.js 和 bundle.js 选项，因为 webpack 已经从 webpack.config.js 中加载得到了。比刚才好了一点，但每次修改代码还要敲命令还是很烦 -- 稍后我们会让这个过程再顺利些~

纵观一下，虽然可能看起来变化不大，但这个流程实际上取得了很大的进步。我们不再需要使用额外的标签加载全局变量。任何新的 JavaScript 库都可以使用 require 语句在 JavaScript 文件中引入，而不是在 HTML里加 <script> 标签。而且打包后的单 JavaScript 文件对性能提升是很大的优势。而且现在既然有了代码的构建过程，我们还可以在我们开发的工作流中加入一些更强大的特性！

使用新的语言特性并编译代码（babel）

编译（transpiling）意味着把代码从一种语言转换成另一种相似的语言。这在前端的发展中是很重要的一部分 -- 浏览器添加新的特性很慢，带有实验中特性的新语言相继创造出来再编译成能在浏览器中兼容的语言。

对 CSS ，举几个来说， Sass, Less, Stylus。对 JavaScript 来说，曾经一度最流行的是 CoffeeScript （大约在 2010 年发布），而现在大多数人会使用 babel 或者 TypeScript.。
CoffeeScript 注重改变 JavaScript 的语言风格 -- 可选的括号，显著的空格风格等等。 Babel 不是一门新语言而是一个编译器，把下一代的 JavaScript 中还未在所有浏览器实现的新特性（ES6 和之后）编译成更早更兼容的 JavaScript( ES5) 。TypeScript 是一门完全等同于下一代的 JavaScript 的语言，但加入了可选的静态类型。很多人选择 babel 因为更贴近普通的 JavaScript。

来看一个例子，在我们刚才使用 webpack 构建的步骤中怎么使用 babel。首先使用命令行安装 babel（npm 包）到项目中：

$ npm install babel-core babel-preset-env babel-loader --save-dev

注意到我们安装了三个独立的包作为开发依赖 -- babel-core 是 babel 的主要部分，babel-preset-env 是预定义编译哪些 JavaScript 的新特性，babel-loader 是一个使 bebel 和 webpack 能够良好地协作的一个包。我们可以配置 webpack 来使用 babel-loader ：

// webpack.config.js
module.exports = {
 entry: './index.js',
 output: {
   filename: 'bundle.js'
 },
 module: {
   rules: [ // 手动加粗
     {
       test: /\.js$/,
       exclude: /node_modules/,
       use: {
         loader: 'babel-loader',
         options: {
           presets: ['env']
         }
       }
     }
   ]
 }
};

语法可能看起来让人困惑（所幸并不需要经常编辑它）。基本上我们是在告诉 webpack 寻找任何 .js 结尾的文件（除了 node_modules 目录）并使用 babel-loader 加载、用 babel-preset-env 作为设置编译 JavaScript 文件。你可以在这里看到更多关于 webpack 配置的信息。

现在既然一切就绪，我们可以在 JavaScript 中写 ES2015 特性啦~这是在 index.js 中一个简单的关于 ES2015 模板字符串的例子：

// index.js
var moment = require('moment');
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);

我们也可以使用 ES2015 import 语句代替 require 加载模块，就像现如今很多代码库中那样：

// index.js
import moment from 'moment';
console.log("Hello from JavaScript!");
console.log(moment().startOf('day').fromNow());
var name = "Bob", time = "today";
console.log(`Hello ${name}, how are you ${time}?`);

在这个例子中，import 语法和 require 并没有特别大的不同，但在更高级的案例中 import 有更大的灵活性。由于修改了 index.js ，需要重新在命令行里运行 webpack：

$ ./node_modules/.bin/webpack

现在你可以在浏览器中刷新 index.html。在写作本文时，大多数的现代浏览器支持所有 ES2015 的特性，所以有时候很难辨别出 babel 有没有去做他该做的事儿。你可以在一些老式浏览器中测试一下比如 IE9 ，或者你可以看一下 bundle.js 找到编译后的代码：

// bundle.js
// ...
console.log('Hello ' + name + ', how are you ' + time + '?');
// ...

在这儿你可以发现 babel 已经把 ES2015 的模板字符串编译成常规的 JavaScript 字符串连接来保持浏览器的兼容性。尽管这个特定的例子不是太令人兴奋，但能够编译代码是很强大的力量。JavaScript 迎来了一些令人兴奋的语言特性比如像 async/await，你可以从现在开始写出更好的代码。尽管编译有时候看起来比较繁琐、痛苦，但在过去的几年里它驱动语言有了很多激动人心的改进，因为人们能够在今天检验明天的特性。

我们差不多要完成了，但在工作流中还是有些做的太粗糙的部分。如果我们关心性能的话，就应该最小化打包文件，这个过程应该足够简洁因为我们在构建过程已经合并了文件。还有在每次修改完 JavaScript 文件后我们仍然需要重新运行 webpack 命令。所以下一步我们将寻找一些方便的工具来解决这些难题。

使用自动构建工具（npm 脚本）

现在既然使用构建过程来进行 JavaScript 模块化开发，那任务管理工具应该也会很有用，从而自动化不同的构建流程。对于前端开发来说，这些任务包括最小化代码文件、优化图片、运行测试等等。

2013 年，Grunt 是最流行的前端构建工具，Gulp 在不久后紧跟其后。它们都依赖一些集成了其他命令行工具的插件。最近最流行的选择似乎是使用 npm 内建的脚本功能自身，不使用插件而是直接使用其他的命令行工具。

来写一下能让 webpack 使用得更方便的 npm 脚本吧。只需要简单修改 package.json 如下：

{
 "name": "modern-javascript-example",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": { // 手动加粗
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --progress -p",
   "watch": "webpack --progress --watch"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "moment": "^2.19.1"
 },
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-env": "^1.6.1",
   "webpack": "^3.7.1"
 }
}

在这里我们添加了两个新脚本，build 和 watch 。运行构建任务，就在命令行里敲：

$ npm run build

这会运行起 webpack （使用我们之前写的 webpack.config.js 中的配置）并带有 --progress 选项显示进程， -p 选项则会最小化生产代码。执行 watch 脚本：

$ npm run watch

使用 --watch 选项从而在每次修改完 JavaScript 文件后能够自动重新运行 webpack 命令，这对开发人员来说十分方便。

注意到在 package.json 中的脚本无需指明 webpack 的完整路径 ./node_modules/.bin/webpack`，，因为 node.js 知道每一个 npm 包的位置。很贴心吧~ 我们甚至可以安装 webpack-dev-server -- 一个简单的带有热更新的 web 服务器来让开发变得更美好。安装它作为开发依赖的话，只需要：

$ npm install we         bpack-dev-server --save-dev

然后再向 package.json 中添加一行脚本：

{
 "name": "modern-javascript-example",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "build": "webpack --progress -p",
   "watch": "webpack --progress --watch",
   "server": "webpack-dev-server --open" // 手动加粗本行
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "moment": "^2.19.1"
 },
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-env": "^1.6.1",
   "webpack": "^3.7.1"
 }
}

现在你可以在命令行运行 dev server：

$ npm run server

这会在你浏览器 localhost:8080（默认）地址打开你的 index.html 网页。只要你修改了 index.js 中的代码，webpack-dev-server 就会重新打包 JavaScript 并自动刷新浏览器。这真的相当节省时间，能够使你注意力集中在代码本身而不是一直在浏览器和代码之间来回切换观察变化。

上面这些仅仅只是触及到了表面，不论是 webpack 还是 webpack-dev-server（你可以从这里阅读更多）都有相当多的选项。你当然也可以写 npm 脚本运行其他任务，比如把 Sass 转换为 CSS，压缩图片，运行测试等等。npm 脚本本身也有很多高级选项和技巧 -- Kate Hudson 的这个 talk 就是一个很棒的开始。

结语

这就是简明的现代 JavaScript。我们从最简单的 HTML 和 JS 到使用包管理工具自动下载第三方包，使用模块打包器生成单个文件，利用编译工具使用未来的 JavaScript 特性，使用任务构建工具来自动化代码构建过程的不同部分。毫无疑问变化了很多，尤其对于初学者来说。Web 开发过去对于新学编程的人来说是一个很好的入门点，因为很容易就能开始，运行。而现在日新月异不断变化的工具让人畏惧。

仍然没有看起来那么糟。一切正在逐渐稳定下来，尤其是前端适应 node 生态系统已经成为一种可行的方式。使用 npm 作为包管理工具使得前后端更加统一，node require 或者 import 语句可以进行模块化开发，npm 脚本自动运行任务。比起一两年前这大大简化了工作流！

对于初学者或者有经验的开发者更棒的是现如今的许多框架都带有工具让初始化项目更方便。Ember 有ember-cli ，对 Angular 的 angular-cli `的很大影响。还有 React 的 create-react-app， Vue 的 vue-cli 等等。这些工具都会把你几乎需要的一切准备好 -- 你需要做的就是开始写代码。然而这些工具并不是魔法，它们仅仅是把一切统一并跟上工作潮流 -- 你也可能经常需要对你的 webpack, babel 等等做一些额外的配置。所以理解每一块都做了什么仍然至关重要，就像我们在本篇文章涉及的那样。

现代 JavaScript 有时可能真的会让人觉得很沮丧，因为飞速的变化和发展。尽管有时候看起来像是在重复造轮子，JavaScript 的快速进化却推动着创新，比如热更新，实时 linting，时光旅行般的调试。作为一个开发者这简直让人兴奋。希望这些信息，在你的旅途中能够有意义~

Special thanks to @ryanqnorth’s Dinosaur Comics 。

原文地址

老铁们关注《大话WEB开发》微信公众号，不定时推荐WEB开发相关技术博文，共勉与学习交流！二维码↓

↓ ↓ ↓ ↓ 点击领取淘宝优惠券，推荐获得的佣金奖励将用于本站的服务器费用，有需要购物的朋友可以领券，感谢支持！