JS模塊化知識總結

背景

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
 ...........

 

js 文件之間相互依賴,變量會形成全局的污染,並且js之間的依賴順序也會容易出錯,容易形成混亂

AMD 

定義:異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行

RequireJs

• util.js

define(function(){
var util ={
getFormatDate: function(date,type) {
if(type ===1){
return '2017-06-21';
}else{
return '2017年06月21日';
}
}
}
return util;
})

• a_util.js

define(['./util.js'],function(util){
var aUtil={
     aGetFormatDate: function(date) {
return util.getFormatDate(date,2)
}
}
})

• a.js

define(['./a_util.js'],function(aUtil){
var a={
     printFormatDate: function(date) {
console.log(aUtil.aGetFormatDate(date));
}
}
return a;
})

• main.js

require(['./a.js'],function(a) { //require 異步加載的模塊必須定義爲define
var date =new Date();
a.printDate(date);
})

• 入口文件(app.html)

<script data-main="./main.js" src ="....引用require.js">

CommonJS 

nodejs 模塊化規範,如今被大量用於前端開發:前端開發依賴的庫和插件,均可以從 NPM 服務器中獲取,構建工具的高度自動化,使之npm 成本很是低,CommonJS 不會異步加載JS,而是同步一次性加載出來,

modele.exports = {
getFormatDate: function(date,type) {
........
}
    }

  .......　　

AMD 和 CommonJS 的使用場景

須要異步加載JS,使用AMD

使用了NPM ,建議使用CommonJS

構建工具

webpack

webpack 是根據webpack.config.js構建出bundle.js 文件:

import path from 'path'
module.exports = {
  context :path.resolve(__dirname, './src') .  //入口文件所在目錄路徑拼接
  entry: './app', //入口文件
  output: {  //webpack 構建出的文件
    path: path.resolve(__dirname,'dist')
    filename: 'bundle.js'
  },
  module: {
 loaders: [ //module.loaders分配加載程序
{ 
test: /\.jsx?$/, 
exclude: /node_modules/, 
loader: 'babel', 
query: { presets: ['es2015', 'react'] } .  //須要babel-preset-es2015和babel-preset-react轉義
        }
 ] 
},
  plugins: [
new webpack.optimize.UglifyJsPlugin() //壓縮
  ]
...........
};