Browserify模塊化使用教程

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.js

     
     module.exports = {
      foo() {
        console.log('moudle1 foo()')
      }
     }

   • module2.js

     
     module.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]))

• 打包處理js:

  • browserify js/src/app.js -o js/dist/bundle.js

• 頁面使用引入: