Browserify模块化使用教程

最新推荐文章于 2024-11-20 13:40:03 发布

原创最新推荐文章于 2024-11-20 13:40:03 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

如有不足，欢迎纠正

本文详细介绍了Browserify在项目中的具体应用，包括项目结构搭建、模块定义与引用、全局及局部依赖安装，以及如何通过Browserify进行JS文件的打包处理。通过实际案例，读者可以学习到如何将多个模块化JS文件整合成一个可用于浏览器环境的bundle文件。

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

Browserify模块化使用教程

创建项目结构

|-js
  |-dist //打包生成文件的目录
  |-src //源码所在的目录
    |-module1.js
    |-module2.js
    |-module3.js
    |-app.js //应用主源文件
|-index.html
|-package.json
  {
    "name": "browserify-test",
    "version": "1.0.0"
  }

下载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:
- browserify js/src/app.js -o js/dist/bundle.js
页面使用引入: