前端模块化规范介绍

1、模块化规范有：EMC AMD CMD CommonJS
  EMC 是es6语法提供的模块化方法，是原生方法，用在浏览器端，异步加载
  AMD 是在未提供EMC之前，模块化方法，运行在浏览器前端，异步加载,例如require.js
  CMD 用的较少，是参照AMD规范，开发者自行研究的规范，例如sea.js
  CommonJS 是node引擎下的模块化方法，运行在node端，同步加载
  UMD 并不是一套规范，它是用来处理CommonJS、AMD、CMD的差异兼容，是模块代码能在前面不同的模块环境下都能正常运行

2、EMC

  js文件中模块导出
 export default xxx
 export {xxx}
 js文件中模块加载
 import xxx from './xx.js'
 html页面调用
 <script type="module" src="...">
 import model1 from './xx/xx.js'
 </script>

3、AMD(require.js为例)

 js文件中定义模块
 //js文件中每个函数都包含在define里
 define(function(){
    xxxxx
 })

//js文件中提前加载模块
   define(['xx/b.js'],function(){
    return {}  //导出的方式
   })
//js文件中实时加载模块
   define(function(require){
     let b= require('xx/b.js')
     exports.action=function(){}; //导出的另一种方式
   })
html页面调用
  <script src="./xxx/requirejs.min.js" data-main="./xx/xx.js"></script>

4、CommonJS
  js文件中模块导出
  module.exports={}
  js文件中模块导入
  const koa=require('koa') // 如果模块是node_modlues文件夹下的可以直接写模块名，node是支持的
  const myModule=require('./usercomponent/xxxx.js')//js后缀可以省略，自定义的模块要写路径

补充：

1、webpack就是编译es6模块化编程amd，cmd，然后供不认识es6模块化的浏览器识别

2、webpack是nodejs开发的打包工具