Browserify

最新推荐文章于 2025-09-30 03:31:55 发布

原创最新推荐文章于 2025-09-30 03:31:55 发布 · 909 阅读

2 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#javascript #browserify #模块 #module

前端专栏收录该内容

186 篇文章

订阅专栏

本文介绍Browserify的基础使用方法，包括初始文件夹结构设置、下载并保存Browserify到项目、使用Browserify打包文件等。通过实例演示如何利用Browserify管理前端模块依赖。

初始文件夹结构
下载并保存 Browserify 到项目
Browserify 和 NPM
使用 Browserify 打包文件
尝试增加自己的模块

browserify 是一个前端打包工具，它能帮你解决前端复杂的模块依赖关系。

browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的Javascript代码,通过预编译让前端Javascript可以直接使用 Node NPM

初始文件夹结构

初始文件夹结构如下：

.
├── app.js
└── index.html

app.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-dev

Browserify 和 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 打包，不断刷新页面即可见效果。