browserify 是一个前端打包工具，它能帮你解决前端复杂的模块依赖关系。
browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的Javascript代码,通过预编译让前端Javascript可以直接使用 Node NPM
初始文件夹结构
初始文件夹结构如下：
.
├── app.js
└── index.htmlapp.js 暂时为空，index.html 为最基本的 html 结构，引入 app.js 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>browserify</title>
</head>
<body>
<div class="main"></div>
</body>
<script src="app.js"></script>
</html>在 app.js 中增加简单的代码 alert('hello browserify!')，在浏览器中打开页面，可见弹出提示。
下载并保存 Browserify 到项目
首先，使用 npm init 命令生成 package.json 文件。
然后，使用以下命令下载 Browserify 并保存为开发依赖包。
cnpm install browserify --save-devBrowserify 和 NPM
使用npm安装的依赖包，Browserify可以自动识别。 以jQuery为例：
cnpm install jquery --save然后，使用的时候，就可以：
var $ = require('jquery');如果不是使用 npm 安装的 jquery 依赖包，而是直接本地根目录下的 jquery ，那么：
var $ = require('./jquery.js');完成后，在 index.html 增加：
...
<body>
<div class="main"></div>
</body>
...然后，在 app.js 中对 main 这个 div 作简单处理：
var $ = require('./jquery.js');
$('.main').text('hello browserify!');如果这时在浏览器中打开 index.html 是会报错的，因为浏览器本身不懂得处理文件之间的依赖关系，需要使用 Browserify 打包文件后才可以看到效果。
使用 Browserify 打包文件
首先，把 index.html 引入的 js 文件从 app.js 改为 bundle.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>browserify</title>
</head>
<body>
<div class="main"></div>
</body>
<script src="bundle.js"></script>
</html>bundle.js 从哪里来呢？
在 package.json 中增加以下部分：
...
"scripts": {
"build": "browserify app.js -o bundle.js"
}
...然后在命令行运行以下命令：
npm run builld完成以后可以发现，文件夹下新增了 bundle.js ，这时候打开 index.html 应该就可以正常看到文字了。
browserify app.js -o bundle.js这个命令所做的，就是把 app.js 所依赖的所有文件都打包到 bundle.js 里面去。打开 bundle.js 可以看到 app.js 和 jQuery 的内容。
尝试增加自己的模块
Browserify 可以使用通过 npm 下载的包，非常方便。但它的用处绝不仅于此。在开发的时候，把自己的代码模块化，然后 export 出去，在 Browserify 中也可以使用 require 来获得。
现在，把问候语强化成一个小模块 salutation.js，放在 utils 文件夹下。
/* 创建自己的模块 */
var salutation = function (container) {
var greetingsList = [
'Nice to see you here!',
'很高兴见到你！',
'Hahaaaaaaa!',
'Boom Boop!'
];
var max = greetingsList.length;
var randomIndex = Math.floor(Math.random() * max);
container.text(greetingsList[randomIndex]);
};
/* 把模块export出去 */
module.exports = salutation;在 app.js 中引入这个模块，并使用：
var $ = require('./jquery.js');
/* 引入自己的salutation模块 */
var salutation = require('./utils/salutation.js');
salutation($('.main'));然后使用 browserify 打包，不断刷新页面即可见效果。
扫一扫
806
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
