프런트엔드 모듈식 엔지니어링

프런트엔드 모듈화 구현

CommonJS CommonJS는 서버 측의 동기화 모듈화 규범 실현자: Node.js

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

로드 방식:

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

 

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 파일..

CMD CMD는 국내 프로그래머가 제기한 유니버설 모듈 정의로 클라이언트에 사용할 수 있고 서버 사이드로 전환하기 쉽다: sea.js

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"