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