CommonJS-Browserify模块化_js 使用browserify打包的模块-优快云博客

本文链接：https://blog.youkuaiyun.com/py_1990_04_20/article/details/106907260

本文详细介绍如何使用Browserify进行模块化开发，包括项目结构搭建、模块定义与使用、依赖库引入及打包流程。通过具体示例，展示Browserify如何帮助前端项目实现模块化管理和优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Browserify模块化

Browserify让你可以使用require('modules')在浏览器端打包模块依赖

创建项目结构

|-js
  |-dist
  |-src
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js
|-index.html
|-package.json
  {
    "name": "browserify-demo",
    "version": "1.0.0"
  }

-dist 打包生成文件的目录
-src 源码所在的目录
-app.js 应用主文件

下载browserify

全局: npm install browserify -g
局部: npm install browserify --save-dev

定义模块代码

module1.js

module.exports = {
  foo() {
    console.log('moudle1 foo()');
  }
};

module2.js

module.exports = function () {
  console.log('module2()');
};

module3.js

exports.foo = function () {
  console.log('module3 foo()');
};

exports.bar = function () {
  console.log('module3 bar()');
};

app.js (应用的主js)

//引用模块
let module1 = require('./module1');
let module2 = require('./module2');
let module3 = require('./module3');

let uniq = require('uniq');

//使用模块
module1.foo();
module2();
module3.foo();
module3.bar();

console.log(uniq([1, 3, 1, 4, 3]));

打包处理JS:
先下载依赖的库uniq: cnpm i uniq --save
```
browserify js/src/app.js -o js/dist/bundle.js
```

页面使用引入:

<script type="text/javascript" src="js/dist/bundle.js"></script>