Browserify

来源：互联网发布：扶摇皇后知乎编辑：程序博客网时间：2024/06/05 00:54

初始文件夹结构
下载并保存 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 打包，不断刷新页面即可见效果。

阅读全文

0 0