JS模块化-2 Browserify 模块化使用
1. 创建项目结构
```
|-js
|-dist //打包生成文件的目录
|-src //源码所在的目录
|-module1.js
|-module2.js
|-module3.js
|-app.js //应用主源文件
|-index.html
|-package.json
{
"name": "browserify-test",
"version": "1.0.0"
}
```
![](https://img2022.cnblogs.com/blog/879695/202208/879695-20220811102146220-1559990915.png)
2.初始化:
$ npm int
2.1 安装 browserify:(局部和全局都要安装)
全局安装:
$ npm install browserify -g
局部安装:
$ npm install browserify --save-dev
3.定义模块代码:
module1.js
//暴露一个对象: module.export = value //module.exports = value 这种方式只能暴露一个,不能暴露多个 module.exports = { msg:'module1...', foo(){ console.log(this.msg) } }
module2.js
module.exports = function () { console.log('module2()...') }
module3.js
exports.foo = function () { console.log('module3 foo()') } exports.bar = function () { console.log('module3 bar()') } exports.arr = [1,3,1,0,3,6,11]
app.js(应用的主js)
//将其他模块汇集到主模块 //引入模块:var module = require(模块名或模块路径); // let uniq = require('uniq') let module1 = require('./module1') let module2 = require('./module2') let module3 = require('./module3') module1.foo() module2() module3.foo() module3.bar() // let res = uniq(module3.arr) // console.log(res)
打包处理js:
//browserify 将要被打包的文件 输出 打包后的文件 $ browserify js/src/app.js -o js/dist/bundle.js
打包完成后 dist 文件下就生成了 bundle.js
4.在 index.html 页面引入 打包后的js
<script src="js/dist/bundle.js"></script>
预览
browserify 官网:https://browserify.org/
end~