前端模块化工程化

前端模块化实现

1.  CommonJS

    CommonJS 是一个服务器端的同步模块化规范
     实现者：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() 函数的第一个参数必须是一个数组，指明该模块的依赖性。

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

   当require() 函数加载上面这个模块的时候，就会先加载 myLib.js 文件。

3. CMD 
   CMD 是国内的程序员提出的通用模块定义，可用于客户端，也容易转换成服务器端
           实现者：sea.js
4. ES6 的模块化
           w3c 官方提出的新一代JS规范，包含了模块化规范语法
           实现者：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"