赵走x博客 - 开发者的网上家园

30、安装必备工具

资源编号:76080 书籍 React快速上手开发热度：81

要让index.html 打开后能显示预期效果，你需要预先完成以下工作。

* 创建bundle.css。这个文件只是简单地拼接CSS，因此不需要依赖安装其他工具。
* 让代码在浏览器中可读。你需要使用Babel 进行转译。
* 创建bundle.js。我们使用Browserify 完成这项工作。

Browserify 不仅负责拼接脚本文件，还要完成以下任务。

*  解析并引入所有的依赖。你只需要告诉它app.js 的位置，它就能找出所有的依赖（包括React、Logo.js 等）。
*  引入一个CommonJS 实现，以保证require() 调用可以在浏览器中正常工作。Babel 会把所有的import 语句转化为require() 函数调用。

简而言之：你需要事先安装Babel 和Browserify。可以通过Node.js 附带的npm（node package manager，Node 包管理器）进行安装。

# 1、　Node.js
要安装Node.js，请打开http://nodejs.org 并根据你的操作系统类型下载对应的安装程序。下载完成后，跟随指引完成安装。然后你就可以利用npm 安装依赖包了。

要验证是否安装成功，可以在终端中输入：
```
$ npm --version
```
如果你没有使用终端（命令提示符）的经验，现在就是学习的最好时机！如果你使用Mac OS X，可以点击Spotlight 搜索（右上角的放大镜图标）并输入Terminal。如果你使用Windows，找到开始菜单（右键点击屏幕左下方的Windows 图标），选择“运行”，并输入powershell。

在本书中，为了区分终端命令与常规代码，所有在终端中输入的命令都以提示符$ 开头。实际在终端中输入命令时，请去掉$ 符号。

# 2、Browserify
在终端中输入如下命令，可以通过npm 安装Browserify：
```
$ npm install --global browserify
```
要验证是否安装成功，输入：
```
$ browserify --version
```

# 3、Babel
要安装Babel 的命令行界面（command-line interface，CLI），输入：
```
$ npm install --global babel-cli
```
要验证是否安装成功，输入：
```
$ babel --version
```
发现规律了吗？
通常情况下，推荐在项目本地安装Node 包，也就是去掉上述例子中的 --global 标记（参见另一种模式：global === bad?）。在本地安装依赖包时，你可以安装同一个包的不同版本，以满足你的应用以及引入库的依赖关系。

但对于Browserify 和Babel 来说，在全局范围安装能方便你在全局范围（任何一个目录）通过命令行界面进行访问。

# 4、React 相关
最后还需要安装几个React 相关的依赖包：

* 首先当然是react；
*  react-dom，它是独立于React 的；
*  babel-preset-react，让Babel 支持JSX 以及其他React 语法；
*  babel-preset-es2015，提供了对新版本JavaScript 特性的支持。

首先进入应用目录（输入cd ~/reactbook/reactbook-boiler 命令），然后就可以在本地安
装这些包了：
```
$ npm install --save-dev react
$ npm install --save-dev react-dom
$ npm install --save-dev babel-preset-react
$ npm install --save-dev babel-preset-es2015
```
接下来你会注意到，应用目录中出现了一个node_modules 目录，其中包含本地安装的包及其依赖包。前面两个全局安装的模块（Babel 和Browserify）则放在了另一个node_modules目录中，其具体位置和操作系统有关（比如/usr/local/lib/node_modules 或者C:\Users{ 用户名}\AppData\Roaming\npm\）。