Fekit CommonJs 규범 에 따 른 JS 모듈 포장

fekit 전단 자동화 구축 도 구 를 이용 하여 전단 공정 화 개발 공 사 를 진행 하 는 과정 에서 우 리 는 fekit 가 CommonJS 규범 을 사용 하여 JS 모듈 화 를 실현 하 는 것 을 알 고 있다.그 중에서 scripts 폴 더 (JS 파일 디 렉 터 리) 의 모든 파일 (대부분 js 파일) 은 하나의 모듈 입 니 다. 그리고 우 리 는 module 대상, exports 대상 과 require () 방법 으로 모듈 의 정의 와 모듈 인용 을 합 니 다.
fekit 에서 CommonJS 를 이용 하여 실 현 된 JS 파일 에는 module 대상, exports 대상 과 require () 방법 이 포함 되 어 있 지만 브 라 우 저 숙주 환경 에서 JS 는 상대 적 인 module 대상, exports 대상 과 require () 방법 이 없습니다. 그러면 브 라 우 저 는 어떻게 JS 문 서 를 실행 합 니까?아니면 fekit 는 어떤 작업 을 해서 우리 의 JS 파일 (대부분) 을 모듈 화 할 수 있 고 브 라 우 저 에서 실행 할 수 있 습 니까?
fekit 의 모듈
다음은 fekit 를 이용 하여 도구 모듈 화 된 CommonJS 규범 을 기반 으로 한 index. js 파일 입 니 다.

    var $ = require('../libs/jquery.js')
    exports.ajax = function(){
        $.ajax({
            url: '/web/getJSON',
            method: 'GET',
            data: {},
            success: function(res){
                var str = "";
                $.each(res.data,function(index,value){
                    str+="
"+value+"
";
                });
                $('.ul').html(str);
            }
        })
    }
    exports.count = 1;

먼저 우 리 는 require () 방법 을 이용 하여 jquery. js 모듈 을 인용 한 다음 index. js 에서 module 대상 중의 exports 대상 을 이용 하여 ajax () 방법 과 count 변수 (테스트 일 뿐) 를 포함 하 는 모듈 을 정의 하 였 으 며, 그 중에서 ajax 방법 에서 우 리 는 도입 한 jquery. js 를 사용 하 였 다.
이 index. js 모듈 을 작성 한 후에 fekit 구축 도 구 를 이용 하여 이 프로젝트 를 실행 한 다음 chorme 브 라 우 저의 source 패 널 에서 index. js 가 다음 과 같은 내용 으로 변 하 는 것 을 볼 수 있 습 니 다.

;(function(__context){
    var module = {
        id : "118cd57f279558dffcbae8096c7cf113" ,
        filename : "index.js" ,
        exports : {}
    };
    if( !__context.____MODULES ) { __context.____MODULES = {}; }
    var r = (function( exports , module , global ){
        var $ =__context.____MODULES['8777f761b8463a858236c246bedbce92'];
        exports.ajax = function(){
            $.ajax({
                url: '/web/getJSON',
                method: 'GET',
                data: {},
                success: function(res){
                    var str = "";
                    $.each(res.data,function(index,value){
                        str+="
"+value+"
";
                    });
                    $('.ul').html(str);
                }
            })
        }
        exports.count = 1;
    })( module.exports , module , __context );
    __context.____MODULES[ "118cd57f279558dffcbae8096c7cf113" ] = module.exports;
})(this);

프로젝트 에 있 는 index. js 와 비교 해 보면 브 라 우 저 에 보 여 준 index. js 는 우리 의 index. js 를 포장 하고 겉 은 2 층 IIFE 를 포장 한 것 이 바로 fekit 가 우 리 를 도와 준 일이 다.
fekit 뭐 했 어 요?
우 리 는 fekit 가 우리 의 JS 파일 바깥쪽 에 2 층 IIFE 를 쌌 다 는 것 을 알 게 되 었 습 니 다. 그러면 이 2 층 IIFE 는 무엇 을 했 습 니까?
모듈 이전의 역할 영역 이 왜 격 리 되 어 상호 오염 을 피 했 는 지 알 것 같다.바로 이 두 층 의 IIFE 가 일 으 킨 것 이다.
1 층 IIFE
브 라 우 저의 index. js 를 통 해 이 포장 의 목적 을 알 수 있 습 니 다.

숙주 대상 에 전래 되 었 다.전입 this 실 참 급 __context 형 삼 을 통 해 숙주 대상 의 전달 을 실현 하고 숙주 대상 중 하나 ____MODULES 배열 이 있 으 며 CommonJS 규범 을 통 해 정 의 된 모든 모듈 의 매 핑 이 저장 되 어 있 음 을 알 수 있다.이것 이 바로 1 층 IIFE 가 숙주 대상 에 들 어 가 는 이유 입 니 다. 바로 이 ——MODULES 배열 에 저 장 된 맵 을 통 해 다른 모듈 을 참조 하기 위해 서 입 니 다.다른 모듈 이 참조 할 수 있 도록 현재 모듈 의 맵 을 이 배열 에 저장 합 니 다.

현재 모듈 의 module 대상 을 만 듭 니 다.이 대상 에는 현재 모듈 의 id, filename, exports 속성 이 포함 되 어 있 습 니 다.

2 층 IIFE
이 포장 의 목적:

이전 IIFE 에서 만 든 module 대상 과 숙주 대상 을 입력 합 니 다.module 대상 은 현재 모듈 을 포장 하기 위해 서 입 니 다. 숙주 대상 은 현재 모듈 의 맵 을 ——MODULES 배열 에 저장 하기 위해 서 입 니 다.

다른 모듈 을 참조 합 니 다.2 층 IIFE 의 첫 마디 는 숙주 대상 ——MODULES 배열 에서 ID 를 찾 는 것 임 을 알 수 있 습 니 다. 이 ID 는 jquery. js 모듈 의 moudule 대상 중의 id 속성 입 니 다.

모듈 의 방법 이나 변 수 를 exports 대상 에 할당 합 니 다.이 모듈 을 다른 모듈 에 사용 하 는 방법 이나 변 수 를 이전 모듈 대상 의 exports 대상 에 노출 시 켜 야 합 니 다.

현재 모듈 을 숙주 대상 의 ' MODULES' 배열 에 저장 합 니 다.이 모듈 의 id 를 숙주 대상 의 ' MODULES' 배열 에 저장 하면 다른 모듈 은 현재 모듈 을 참조 할 수 있 습 니 다.

주: CommonJS 에 서 는 각 모듈 에 하나의 module 대상 이 현재 모듈 대상 을 대표 하고 exports 대상 에 다른 모듈 에 노출 된 변수 와 방법 을 저장 합 니 다.
종결 어
이것 은 바로 fekit 가 CommonJS 규범 을 실현 하여 개발 자 들 이 JS 를 편리 하 게 모듈 화 개발 할 수 있 도록 하 는 것 입 니 다. 브 라 우 저가 CommonJS 규범 으로 작 성 된 JS 모듈 화 된 파일 을 지원 하지 않 을 까 봐 걱정 하지 않 아 도 됩 니 다.
전단 자동화 구축 도 구 는 JS 모듈 화 된 포장 방식 에 대해 서도 각각 다 르 지만 목적 은 같 습 니 다. 예 를 들 어 Gulp 가 webpack 의 imports - loader 플러그 인 을 이용 하여 포장 한 것 은 다음 과 같 습 니 다. 관심 있 는 파트너 는 연구 할 수 있 습 니 다.
gulp (webpack) 포장 후

    /******/ (function(modules) { // webpackBootstrap
    /******/    // The module cache
    /******/    var installedModules = {};

    /******/    // The require function
    /******/    function __webpack_require__(moduleId) {

    /******/        // Check if module is in cache
    /******/        if(installedModules[moduleId])
    /******/            return installedModules[moduleId].exports;

    /******/        // Create a new module (and put it into the cache)
    /******/        var module = installedModules[moduleId] = {
    /******/            exports: {},
    /******/            id: moduleId,
    /******/            loaded: false
    /******/        };

    /******/        // Execute the module function
    /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    /******/        // Flag the module as loaded
    /******/        module.loaded = true;

    /******/        // Return the exports of the module
    /******/        return module.exports;
    /******/    }


    /******/    // expose the modules object (__webpack_modules__)
    /******/    __webpack_require__.m = modules;

    /******/    // expose the module cache
    /******/    __webpack_require__.c = installedModules;

    /******/    // __webpack_public_path__
    /******/    __webpack_require__.p = "";

    /******/    // Load entry module and return exports
    /******/    return __webpack_require__(0);
    /******/ })
    /************************************************************************/
    /******/ ([
    /* 0 */
    /***/ function(module, exports, __webpack_require__) {

        module.exports = __webpack_require__(1);


    /***/ },
    /* 1 */
    /***/ function(module, exports) {

        /*** IMPORTS FROM imports-loader ***/
        var define = false;

        var common = {
          render: function ($el, str) {
            if($el.get(0).tagName.toLowerCase() == 'body') {
              $el.prepend(str);
            } else {
              $el.html(str);
            }
          }
        };

        module.exports = common;

    /***/ }
    /******/ ]);

gulp (webpack) 포장 전

    var common = {
      render: function ($el, str) {
        if($el.get(0).tagName.toLowerCase() == 'body') {
          $el.prepend(str);
        } else {
          $el.html(str);
        }
      }
    };

    module.exports = common;