JS模块化开发

什么是js模块化：

将不同的js功能代码拆分不同的文件, 使用时再导入进去。例如，数据请求的模块，需要使用的页面直接导入即可

好处：

• 避免全局命名污染
• 可复用性
• 可维护性

早期模块化写法：

// 模块化设计模式
let counter = (function(){
 let count = 0;
 return {
   init() {
      count = 0;
   }
   plus(value) {
     count += value;
   }
 }
}());
counter.plus(1);

弊端：无法复用

// 文件导入
// counter.js
let counter = (function(window){
  let count = 0;
  return {
    init() {
       count = 0;
    }
    plus(value) {
      count += value;
    }
}
}(window));

<script src="counter.js"></script>
<script>
  counter.puls(1);
</script>

弊端：

• 当引入多模块时http请求过多
• 有依赖需顺序引入

使用模块规范进行编写，打包

commonjs:

导出module.exports = {}
导入let obj = require('./module')

// module.js
module.exports = {value:1}
// main.js
let obj = require('./module')
console.log(obj);

使用browserify进行打包

npm install -g browserify
npm install --save-dev browserify

browserify main.js -o bundle.js

es6 mudole:

导出export default {}
导入import obj from './module

  // module.js 
export default {value: 1}
// main.js
import obj from './module.js';
console.log(obj);

使用babel+browserify进行打包
先用babel转es5,再用browserify打包

// babel
npm babel-cli babel-preset-es2015 --save-dev
npm install --save-dev browserify
// 新建.babelrc文件， 通过cli创建 touch .babelrc
{
  "presets": ["es2015"]
}
 babel es6.js --out-file es5.js
browserify es5.js -o bundle.js