本节书摘来异步社区《D3.js数据可视化实战手册》一书中的第1章，第1.3节，作者： 【加拿大】Nick Qi Zhu，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 搭建一个基于NPM的开发环境

D3.js数据可视化实战手册
如果你所在的项目是一个略复杂的数据展示项目，并且使用了为数不少的JavaScript库，那我们之前讨论的那个简单的解决方案可能就显得有些褚小杯大，不能胜任了。在这一节当中，我们将展示一个使用了NPM（Node Packaged Modules，实际上就是JavaScript库的代码库管理系统）的更加强大的系统。如果你像我一样没有耐心，想更快地尝试本书最带劲儿的部分，想学点秘传招式，完全可以跳过这部分，如果想搭建一个产品开发环境，再回来看看这部分也不迟。

1.3.1 准备阶段

我们开始前要先确保NPM已经安装好了。在安装Node.js时，NPM作为其中一部分也被安装了。可以在http://nodejs.org/download/ 下载Node.js。选择适合你操作系统的Node.js，安装完毕后，在终端窗口运行如下npm命令。

> npm -v 
1.2.14```
如果前面的命令输出了NPM客户端的版本号，就说明安装成功了。

####1.3.2 搭建环境
安装完NPM后，让我们创建一个包描述符文件，以便自动化一些手动安装的过程。

1．首先，在工程文件夹下，创建名为package.json的文件，包含下面的代码。

{

"name": "d3-project-template",

"version": "0.1.0",

"description": "Ready to go d3 data visualization project template",

"keywords": [

 "data visualization",

 "d3"

],

"homepage": "",

"author": {

 "name": "<your name>",

 "url": "<your url>"

},

"repository": {

 "type": "git",

 "url": "<source repo url>"

},

"dependencies": {

 "d3":"3.x"

 },

"devDependencies": {

   "uglify-js": "2.x"

}

}

2．定义package.json文件后，运行下面的命令。

npm install`

1.3.3 工作原理

package.json文件中绝大部分字段仅仅用于提供信息，比如name、description、homepage、author和repository。如果你打算把自己的库发布到NPM的代码库中，就要用到name和version字段。现在，我们在意的是dependencies和devDependencies字段。

dependencies字段描述了你的工程所用到的库在运行时的依赖，它们可以使你的工程在浏览器中正常运行。在这个简单的例子中，对于d3我们只有一个依赖。d3是D3在NPM库中发布时使用的名字。版本号3.x标明该工程可以兼容任意大版本为3的发行版，并且NPM应该获取大版本为3的最新的稳定发布版本来满足依赖。
图像说明文字D3是个自满足的库，运行时对外部是零依赖。然而这并不意味着它不能跟其他JavaScript库一起运行。作者平时也使用一些其他的库以便让自己的工作容易些，比如JQuery、Zepto.js、Underscore.js和Backbone.js。

devDependencies字段描述了库在开发时（编译时）的依赖。就是说，这个字段内罗列出来的库文件仅仅在构建工程时会用到，运行JavaScript工程时用不到它们。

执行npminstall可以自动触发NPM去下载你工程中所引用的所有依赖，包括递归的下载依赖的依赖。所有的依赖库文件会被下载到node_modules文件夹中，该文件夹位于工程文件夹中的根目录里。这些完成以后，就可以创建一个HTML文件（跟我们之前创建的那个一样），HTML文件直接从node_modules/d3/d3.js来引用D3的JavaScript库。

本节中的代码可以在此处下载，里面包含了自动构建脚本。

https://github.com/NickQiZhu/d3-cookbook/tree/master/src/chapter1/ npm-dev-env

工程中会有一些麻烦的地方，比如手动下载JavaScript库以时刻保持它们的版本更新。为了避免这些麻烦，使用NPM是个行之有效的方式，可以拯救你于水火之中。当然，一些聪明的读者可能已经发现了，使用这个方法可以把我们的“搭建环境”过程直接提升一个档次。想象一下，你正在构建一个巨大的可视化工程，其中包含了上千行的JavaScript代码，很明显我们这里所描述的简单的搭建方式满足不了这种情形。因为“模块化的JavaScript开发”这个话题足够写本书了，所以这里我们就不再讨论这方面的话题了，我们将把注意力放在数据可视化和D3上。如果你对这方面感兴趣，可以看看这一节的代码，里面演示了如果实现一个模块化的工程，当然也包含了自动构建脚本。在后面单元测试相关的章节中，我们会针对这个话题多讲一些，演示一下，可以在某些方面增强环境，以便运行自动化单元测试。

1.3.4 更多内容

前面提到过，你可以通过浏览器直接打开HTML文件来查看可视化的结果，不过这种方式有一些局限性。一但我们需要从其他文件中加载数据（后面的章节中我们就要这么做了，这也很像你平时工作中的情形），由于浏览器内建的安全机制，这种方式就不好用了。为了绕开这个安全限制，强烈建议搭建一个本地的HTTP服务器，用该服务器来维护HTML页面和数据文件，而非直接从文件系统加载。

搭建本地HTTP服务器
由于使用的操作系统不同，HTTP服务器的软件包不同，搭建HTTP服务器的方法也很不同。这里说几种比较流行的搭建方式。

Python简易HTTP服务器
这是我最喜欢的方式。如果你的机器上已经安装了Python，通常UNIX/Linux/Mac OS发行版上都有，直接运行下面的命令即可。

> python –m SimpleHTTPServer 8888```
如果你拥有更新版本的Python，那么你也可以运行如下命令。

python –m http.server`

这个python小程序可以启动一个HTTP服务器，然后你就可以访问该程序所在文件夹中的所有文件。这是目前所有操作系统中运行HTTP服务器最简单的方式。

图像说明文字如果你的机器没有安装python，可以在这里下载http://www.python.org/getit/。现在所有的操作系统，诸如Windows、Linux，还有Mac，都支持它。

Node.js HTTP服务器
安装Node.js之后（前面的小节中所做的搭建开发环境练习，包含了相应的内容），就可以搭建http-server模块了。与Python简易HTTP服务器类似，通过该模块，你可以从任意的文件夹快速启动一个轻量级的HTTP服务器。

安装http-server模块。

> npm install http-server –g```
命令中的-g参数会把http-server模块设置为全局的，这样你就可以在命令行里直接使用http-server命令。完成此步后，可以通过下面的命令，在任意文件夹内启动一个服务器。

http-server .`

该命令可以启动一个Node.js驱动的HTTP服务器，默认端口号是8080，也可以用 -p 参数指定一个端口号。

图像说明文字如果是在Linux/UNIX/Mac的操作系统中运行该命令，需要用sudo模式或者root权限来运行。

本文仅用于学习和交流目的，不代表异步社区观点。非商业转载请注明作译者、出处，并保留本文的原始链接。