React开发工具之Browserify&Webpack介绍

构建工具

构建工具帮助你优化重复性的工作使运行代码更加轻松。在React程序中，最具重复性的工作之一就是对所有的React组件运行JSX解释器。我们先了解一下Browserify，之后会详细讲解Webpack。(纯手打，如有拼写错误的地方请留言，谢谢)

Browserify介绍

Browserify是一个JavaScript打包工具，支持在浏览器中使用Node.js风格的require()方法，它会自动将所有的依赖打包到一个文件中，以支持模块在浏览器环境中使用。尽管十分强大，但是Browserify仅支持JavaScript文件。

建立一个Browserify项目

npm init

# ... anser question as necessary to complete init

npm install --save-dev browserify reactify react uglify-js

在package.json文件的末尾增加如下构建脚本：

"devDependencies": {

"browserify": "^16.2.0",

"react": "^16.3.2",

"reactify": "^1.1.1",

"uglify-js": "^3.3.22"

},

"scripts": {

"build": "browserify --debug index.js > bundle.js",

"build-dist": "NODE_ENV=production browserify index.js|uglifyjs -m > bundle.min.js",

"test": "echo \" Error: no test specified \" && exit 1"

},

"browserify":{

"transform": [ "reactify"]

}

在命令行(CLI)运行 npm run build来执行默认的任务，自己观察目录结构会生成什么。可以先做下面一步。不然会报错，因为没有index.js

对代码做出修改

让我们创建一个名为index.js的React+JSX文件：

var