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

31、开始构建

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

构建过程需要完成三件事情：CSS 拼接、JavaScript 转译和JavaScript 打包。这三个过程都很简单，只需运行三条命令即可。

# 1、转译JavaScript
首先通过Babel 转译JavaScript：
```
$ babel --presets react,es2015 js/source -d js/build
```
这条命令从js/source 文件夹中读取所有文件，并转译其中的React 和ES2015 语法，并把结果复制到js/build 中。你会在命令行中看到类似这样的输出结果：
```
js/source/app.js -> js/build/app.js
js/source/components/Logo.js -> js/build/components/Logo.js
```
这个列表内容会随着你的组件内容增多而增加。

# 2、打包JavaScript
接下来进行打包：
```
$ browserify js/build/app.js -o bundle.js
```
你告诉Browserify：应用入口为js/build/app.js，找出其中所有依赖并把结果输出到文件bundle.js 中。最后你需要在index.html 的结尾处引入这个文件。要检查输出文件的内容，可以输入less bundle.js。

# 3、打包CSS
CSS 打包非常简单（至少在现阶段是如此），你甚至不需要借助特别的工具来完成，只需要把所有的CSS 文件拼接成一个就可以了（使用cat 命令）。可是，由于移动了文件路径，CSS 中原有的图像路径会失效，因此我们还需要使用sed 命令简单地进行替换：
```
cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css
```
有一些NPM 包可以帮助你更好地完成这些工作，但目前我们还不需要它们。

# 4、大功告成
现在你已经完成了构建过程，可以准备查看辛勤劳动后的成果了。在浏览器中打开index.html 文件，你将会看见如图5-3 所示的欢迎界面。

![bs64](https://img.handsomemark.com/2019/11/13/c019daee-05c0-11ea-82e9-0242ac140002.png)
图5-3：欢迎使用应用

# 5、在开发过程中构建
每次修改文件后都要手动运行构建过程是一件痛苦的事情。幸好，你可以通过脚本监听目录中的文件改变，并自动运行构建脚本。

首先，我们把构建过程用到的三条命令放到一个文件中，并命名为scripts/build.sh：
```
# 转换js
babel --presets react,es2015 js/source -d js/build
# 打包js
browserify js/build/app.js -o bundle.js
# 打包css
cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css
# 完成
date; echo;
```
接下来，安装一个名为watch 的NPM 包：
```
$ npm install --save-dev watch
```
运行watch 命令对js/source/ 和/css 目录中的任意更改进行监听，一旦文件内容发生变化，
就运行scripts/build.sh 文件中的脚本：
```
$ watch "sh scripts/build.sh" js/source css
> Watching js/source/
> Watching css/
js/source/app.js -> js/build/app.js
js/source/components/Logo.js -> js/build/components/Logo.js
Sat Jan 23 19:41:38 PST 2016
```
当然，你也可以把命令放在scripts/watch.sh 中。每当你进行应用开发时，只需要运行如下代码即可：
```
$ sh scripts/watch.sh
```
你可以对源文件进行修改，然后刷新浏览器来查看新的构建。