[关闭]
@1002522146 2017-07-03T12:06:22.000000Z 字数 857 阅读 459

CommonJS-Browserify模块化教程

js模块化


Browserify模块化使用教程

  1. 创建项目结构

    1. |-js
    2. |-dist //打包生成文件的目录
    3. |-src //源码所在的目录
    4. |-module1.js
    5. |-module2.js
    6. |-module3.js
    7. |-app.js //应用主源文件
    8. |-index.html
    9. |-package.json
    10. {
    11. "name": "browserify-test",
    12. "version": "1.0.0"
    13. }
  2. 下载browserify
    • 全局: npm install browserify -g
    • 局部: npm install browserify --save-dev
  3. 定义模块代码

    • module1.js

      1. module.exports = {
      2. foo() {
      3. console.log('moudle1 foo()')
      4. }
      5. }
    • module2.js

      1. module.exports = function () {
      2. console.log('module2()')
      3. }
    • module3.js

      1. exports.foo = function () {
      2. console.log('module3 foo()')
      3. }
      4. exports.bar = function () {
      5. console.log('module3 bar()')
      6. }
    • app.js (应用的主js)

      1. //引用模块
      2. let module1 = require('./module1')
      3. let module2 = require('./module2')
      4. let module3 = require('./module3')
      5. let uniq = require('uniq')
      6. //使用模块
      7. module1.foo()
      8. module2()
      9. module3.foo()
      10. module3.bar()
      11. console.log(uniq([1, 3, 1, 4, 3]))
    • 打包处理js:

    • browserify js/src/app.js -o js/dist/bundle.js
    • 页面使用引入:
      1. <script type="text/javascript" src="js/dist/bundle.js"></script>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注