CommonJS-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. 下载browserify
   • 全局: npm install browserify -g
   • 局部: npm install browserify --save-dev

3. 定义模块代码

   • module1.jsmodule.exports = { foo() { console.log('moudle1 foo()') } }
   • module2.jsmodule.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])) ```

4. 打包处理js:
   • browserify js/src/app.js -o js/dist/bundle.js
5. 页面使用引入:<script type="text/javascript" src="js/dist/bundle.js"></script>