# 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>`