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() //压缩
  ]
...........
};