2018年（273）
分类： Html/Css
2018-07-09 15:08:27
本文记录了本人以及目前团队从无到有使用React的过程，我们将从webpack开始说起，一步一步展现React最基本的开发生态。在这里并不会介绍任何jsx或es6相关的语法，只聚焦于如何使用react生态搭建利于团队协作、有利于提升开发效率的开发环境。
工欲善必须利其器，想要高效的开发react，必须保证有一个高效有序的开发环境。我们使用的是Facebook开源的脚手架工具——webpack来搭建一个完全不依赖服务器的开发环境。实现高效集成、实时编辑可见、动态编译jsx和es6等强悍功能。
webpack最早是Facebook的instagram团队研发出的脚手架工具，用于支持前端系统的开发。虽然webpack一直都和react嵌套在一起使用，但是他的使用场景并不局限于react，你可以把他应用于所有的前端开发场景。
webpack也是依赖nodejs和npm的，在安装webpack之前务必先安装nodejs的环境，如果在此之前你还没有安装nodejs的环境，可以看这篇的文章获得一些参考。
可以像下面这样安装一个全局的webpack环境。
$ npm install webpack -g
或者以依赖工程的方式安装
# 进入项目目录 # 确定已经有 package.json，没有就通过 npm init 创建 # 安装 webpack 依赖 $ npm install webpack --save-dev
（本例子的代码存放在：。下载后用 npm install 下载npm依赖即可使用。）
Setp1:简单打包
首先我们增加一些用于测试元素。先写一个index.html
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <script src="bundle.js">script> body> html>
然后添加一个entry.js
/**
* Created by chkui on 2016/11/16.
*/ require("!style!css!./style.css"); document.write('hello webpack
');
然后就可以执行打包命令了：
$ webpack ./entry.js bundle.js
运行以后，就会发现在目录中生成了一个bundle.js文件。浏览器中打开index.html就会看到执行效果。