CommonJS-Browserify模塊化

Browserify模塊化

Browserify讓你可以使用require('modules')在瀏覽器端打包模塊依賴

1. 創建項目結構

   |-js
     |-dist
     |-src
       |-module1.js
       |-module2.js
       |-module3.js
       |-app.js
   |-index.html
   |-package.json
     {
       "name": "browserify-demo",
       "version": "1.0.0"
     }
   

   -dist 打包生成文件的目錄
   -src 源碼所在的目錄
   -app.js 應用主文件

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:
  先下載依賴的庫uniq: cnpm i uniq --save

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

• 頁面使用引入:

  <script type="text/javascript" src="js/dist/bundle.js"></script>