# Commonjs浏览器实现
## 创建项目结构
```
|-js
|-dist //打包生成文件的目录
|-src //源码所在的目录
|-|-module.js
|-app.js //应用主源文件
|-index.html
|-package.json
{
"name": "browserify-test",
"version": "1.0.0"
}
```
## 浏览器端使用
浏览器端默认是不支持`commonjs` 模块化语法，需要我们使用第三方工具将其解释成浏览器支持的语法。才可以
### 下载`browserify`
`browserify` [http://browserify.org/](http://browserify.org/)
>[success] Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过[预编译](https://baike.baidu.com/item/%E9%A2%84%E7%BC%96%E8%AF%91/3191547)让前端 Javascript 可以直接使用 Node NPM 安装的一些库--`百度百科`
全局: npm install browserify -g
局部: npm install browserify --save-dev
### 定义模块代码
module.js
```
module.exports = {
foo() {
console.log('moudle1 foo()')
}
}
```
### app.js
```
//引用模块
let module = require('./module')
//使用模块
module.foo()
```
### 打包处理js:
`browserify js/src/app.js -o js/dist/bundle.js`
### 页面使用引入:
`<script type="text/javascript" src="js/dist/bundle.js"></script>`
