Browserify

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过 预编译 让前端 Javascript 可以直接使用 Node NPM 安装的一些库。 -- 来自百度百科
参考链接：https://baike.baidu.com/item/browserify/16823990?fr=aladdin
参考链接： http://browserify.org/ 官网

1. 在桌面新建一个 browserifytest 文件夹，并在命令行中进入该目录

cd Desktop
mkdir browserifytest
cd browserifytest

2. 项目初始化

npm init

3. 我们的主要目的是本地的 js 文件可以引用 server 的 js 文件
4. 安装包 uniq

cnpm install uniq --save

5. 在项目中新建文件 index.js test.js index.html
6. 编辑文件
   index.js

var unique = require('uniq');
var test = require('./test.js');
test(unique);

test.js

module.exports = function(cheerio) {
    console.log('我是服务端的人', cheerio);
};

index.html

7. 在全局安装 Browserify 这个库

npm install -g browserify

8. 把 index.js 文件编译成一个 bundle.js 文件

browserify index.js -o bundle.js

编译成功之后 项目中会多一个 bundle.js 文件
bundle.js

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o

9. 然后再把 index.html 文件在浏览器中打开，查看控制台输出如下，便证明引用成功了

360截图20171127004306699.jpg

总结：

1. webpack 包管理器 核心基于 loader ，编译 Node 会多出很多无用的代码
2. gulp / grunt 基于文件流，更快，可以用它去编译 Node / 基于文件 I/O
3. yo 发布一些自己的模块
   4 . bower 安装依赖
4. browserify 能够让本地的 js 应用服务端的 js，让 js 直接就具有 require 的能力