browserify

Browserify是一个浏览器端代码模块化工具

简介

服务器端NodeJS自带模块功能，可以使用require和module.exports构建项目

随着项目的增大，浏览器端任务越来越重，依赖关系越来越复杂，需要使用工具实现模块化。

Browserify通过require和module.exports来导入和导出。

Browserify的原理：部署时处理代码依赖，将模块打包为一个文件。

存在的问题：

打包为单个文件存在的问题：

• 暂时用不到的代码也会被打包，体积大，首次加载速度慢
• 只要一个模块更新，整个文件缓存失效

Browserify的解决方案：entry point，入口点技术

• 每个入口点打包一个文件，两个入口点的相同依赖模块单独打包为common.js，避免空间的浪费。
• 可以解决单个文件的问题，代价是增加依赖维护成本

入口点技术带来的问题

• Browserify无法判断入口点，需要自己判断入口点。如果网站非常庞大，这就是个麻烦的问题。
• 所以需要自己定义入口点。

以一个gulpfile.js为例，假设已经安装好了所有的模块。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');

gulp.task('jsx', function () {
  browserify({
    entries: ['./app.jsx'],
    transform: [reactify]
  })
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./'));
})
gulp.task('default', ['jsx']);

browserify()：功能是将当前项目的依赖，也就是require的东西打包到当前的一个文件当中。但是它无法将jsx文件转换为js文件，这就需要用到reactify。

reactify：功能是将jsx转换为js。所以在browserify({})中我们设置了transform属性，它可以过滤或转换一些内容。这里用到的是转换。

bundle()：的功能时将多个文件打包成一个。

source()：由于browserify生成的代码无法直接让gulp使用，所以需要用到source()。它将browserify生成的代码转换为gulp可识别的代码。参数是生成的文件名。