前端模块化工程化

前端模块化实现

模块化是指将一个复杂的系统分解为多个模块以方便编码。
很久以前，我们是通过命名空间的方式来组织代码，jQuery库将API放在window.$ 下。缺点一是会造成命名空间冲突，两个库可能会使用同一个名称，别的模块如果也使用window.$（如zepto），这样会造成变量冲突，二是无法合理管理项目依赖和版本。
模块化的思想解决问题。

1.  CommonJS

    CommonJS 是一个服务器端的同步模块化规范。
   核心：
   1）.每个文件都是一个独立的模块
   2）.加载模块，采用require()
   3）.模块导出，采用exports或module.exports

   优点：
   服务器端模块便于重用
   NPM 中已经有将近20万个可以使用模块包
   简单并容易使用
   缺点：
   同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步加载的
   不能非阻塞的并行加载多个模块
   实现者：Node.js

   //a.js
   module.exports = {
        a:function(){}
        b:'xxx'
   }

   加载方式： 

   //b.js
   var m = require('./a');
   m.a();

2.  AMD
   AMD 就是异步模块定义规范，是一个客户端的JS模块化规范。
   具体说就是模块必须采用特定的 define()  函数来定义。
   实现者：require.js
   假定现在有一个 math.js 文件，它定义了一个 math 模块。写法如下：

   //math.js
   define(function () {
       var add = function (x, y) {
           return x + y;
       };
       return {
           add: add
       }
   })

   加载方法如下：

   //main.js
   require(['math'],function(math){
       alert(math.add(1,1))
   })

   如果这个模块还依赖其他模块，那么 define() 函数的第一个参数必须是一个数组，指明该模块的依赖性。
   当require() 函数加载上面这个模块的时候，就会先加载 myLib.js 文件。
   可运行在浏览器环境和node.js 环境。

   define(['myLib'], function (myLib) {
       function foo() {
           myLib.doSomething();
       }
       return {
           foo: foo
       }
   })

3. CMD 
   CMD 是国内的程序员提出的通用模块定义，可用于客户端，也容易转换成服务器端
   实现者：sea.js
    
4. ES6 的模块化
   w3c 官方提出的新一代JS规范，包含了模块化规范语法。
   import .. from ...
   export ... 
   缺点：无法直接运行，必须依赖工具转化后才可运行，如：用babel转为es5
   实现者：Babel
    

Node.js 中通过babel 的ES6 模块化
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
项目根目录创建babel.config.js
配置 babel.config.js

const presets = [
    ["@babel/env", {
        target: {
            edge: '17',
            firefox: '60',
            chrome: '67',
            safari: '11.1'
        }
    }]
];
module.exports = { presets }

创建index.js ,通过npx babel-node index.js 执行代码（先用 clog 测试） 
新建 m1.js 练习 ES6 导出

let a = 10;
let b = 20;
let c = 30;
function show() {
    console.log("show");
}
export default {
    a,
    b,
    show
}
//index.js
import m1 from "./m1.js"
console.log(m1)

 每个模块只能用一次 export default，如果没有并不会报错，默认导出 {}
 

按需导入、导出

按需导入 import { 接受名称1,接收名称2,接收名称n} from 模块标识符
按需导出 export

//m1.js
//可以多次按需导出
export let s1="s111";
export let s2="s222";
export function bb(){
    console.log("bbb");
}

//index.js
import m1,{s1,s2,bb} from "./m1.js"