20 ESM_native 规范

AMD(异步模块定义)

RequireJS (实现按需加载)

1. Requirejs引入
   data-main
2. 模块的定义
   独立模块
   依赖与其他模块的模块
3. 模块的导入
   RequireJS 读取顺序index.html----> main.js—>s.js----->math.js

//index.html
<script src="./require.js" data-main="./main.js"></script>

//main.js
(function(){
   
    require(['./s'],function(s){
   
        alert(s.s_circle(10));
    })
})()

//s.js
define(['./math'],function(m1){
   
    function circle(r){
   
        return m1.multiple(m1.PI,m1.square(r))
    }
    return {
   
       s_circle:circle
    }
})

//math.js
define(function(){
   
    var PI=3.14;
    function multiple(num1,num2){
   
        return num1*num2;
    }
    function square(n){
   
        return n*n;
    }

    return {
   
        PI:PI,
        multiple:multiple,
        square:square
    }
})

CommonJS & webpack

后端中使用commonJS

nodeJS模块的定义,nodeJS模块的导入
nodeJS中读取顺序 main.js—>s.js----->math.js

//math.js
/*
* 在commonjs规范中 定义的变量都是局部变量
* 别的模块要使用必须用module.exports=X 暴露出去
*/
var PI=3.14;
function multiple(num1,num2){
   
    return num1*num2;
}
function square(n){
   
    return n*n;
}
//暴露外界
module.exports={
   
    PI:PI,
    multiple:multiple,
    square:square
}

//s.js
var m=require("./math");

function circle(r){
   
    return m.multiple(m.square(r),m.PI);
}

module.exports={
   
    s_circle:circle
}

//main.js
var s=require("./s");
console.log(s.s_circle(10));

运行 node main.js 输出314;

Webpack和前端CommonJS(前端中使用commonjs)

使用webpack 打包 三个文件到一个文件
语法 : webpck 打包入口文件 打包完成文件名称(webpck只识别JS文件)
打包:webpack main.js output.js
在html中引用即可