胖蔡叨叨叨
你听我说

使用Browserify 实现JS的模块化加载

Broswerify 是一个前端管理依赖的工具,通过它可以在浏览器环境下像nodejs一样遵循commonjs规范的模块化编程。

为什么要使用Browserify

浏览器没有定义require方法,但是Node.js有。使用Browserify可以编写使用require的代码,就像在Node中使用它一样。

原理

Browserify从entry着手,对源代码进行抽象语法树分析,从而获得整个项目的依赖关系图,最后将整个项目打包成一个JavaScript文件。特点如下:

  • 浏览器端的前端打包工具
  • 主要用于在浏览器中使用 npm 包,最终会转换为 commonJS (require) 类似方式,在浏览器使用
  • 方便模块细分,每个模块自成,通过 require 引用其他模块
  • 基于流 Stream

实现

  • 创建add.js文件
module.exports.add = function(a,b) {
    return a + b;
}

  • 创建reduce.js文件
module.exports.reduce = function(a,b){
    return a-b;
}
  • 创建 index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Browserify 测试</title>
</head>

<body align="center">
    <h3>Browserify 测试</h3>
    <form style="text-align: left;margin-left: 40%;">
        <input name="a"  type="input" placeholder="请输入第一个操作数"/>
        <input name="b"  type="input" placeholder="请输入第二个操作数"/>
        <div style="margin-top: 20px;">合计:<span id="result"></span></div>
        <div style="margin-top: 20px;">
            <button id="add" type="button">加法</button>
            <button id="reduce" type="button" style="margin-left: 30px;">减法</button>
        </div>
    </form>
    <script src="./bundle.js" ></script> <!--打包生成文件 -->
</body>
</html>
  • 创建main.js文件
var { add }  = require('./add');
var { reduce } = require('./reduce');

// 加法
document.getElementById('add').onclick =  function () {
    const a = document.getElementsByName('a')[0].value;
    const b = document.getElementsByName('b')[0].value;
    document.getElementById('result').innerHTML = add(a,b);
}

// 减法
document.getElementById('reduce').onclick =  function () {
    const a = document.getElementsByName('a')[0].value;
    const b = document.getElementsByName('b')[0].value;
    document.getElementById('result').innerHTML = reduce(a,b);
}

  • 生成 bundle.js文件
$ npm install -g browserify
$ browserify  main.js > bundle.js

效果

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 使用Browserify 实现JS的模块化加载
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

'); })();