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"

    }

  ```

 

 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~