[javascript] 클라이언트 측의 JavaScript require ()

Program / 글쓴이

require()클라이언트 측에서 (또는 비슷한 것을) 사용할 수 있습니까?

예

var myClass = require('./js/myclass.js');

답변

이를 위해 require.js 또는 head.js 를 살펴 봐야 합니다.

답변

나는 그것을 위해 browserify 를 사용하고 있습니다. 또한 Node.js 모듈을 클라이언트 측 코드에 통합 할 수 있습니다.

나는 여기에 그것에 대해 블로그했다 : browserify를 사용하여 클라이언트 측 JavaScript에 node.js / CommonJS 스타일 require () 추가

답변

Node.js 스타일을 원한다면 require다음과 같이 사용할 수 있습니다.

var require = (function () {
    var cache = {};
    function loadScript(url) {
        var xhr = new XMLHttpRequest(),
            fnBody;
        xhr.open('get', url, false);
        xhr.send();
        if (xhr.status === 200 && xhr.getResponseHeader('Content-Type') === 'application/x-javascript') {
            fnBody = 'var exports = {};\n' + xhr.responseText + '\nreturn exports;';
            cache[url] = (new Function(fnBody)).call({});
        }
    }
    function resolve(module) {
        //TODO resolve urls
        return module;
    }
    function require(module) {
        var url = resolve(module);
        if (!Object.prototype.hasOwnProperty.call(cache, url)) {
            loadScript(url);
        }
        return cache[url];
    }
    require.cache = cache;
    require.resolve = resolve;
    return require;
}());

주의 :이 코드는 작동하지만 불완전하고 (특히 URL 확인) 모든 Node.js 기능을 구현하지 않습니다 (어젯밤에이 코드를 정리했습니다).
실제 앱 에서이 코드 를 사용해서는 안되지만 시작점을 제공합니다. 이 간단한 모듈로 테스트했으며 작동합니다.

function hello() {
    console.log('Hello world!');
}

exports.hello = hello;

답변

나는 나 자신에게 똑같은 질문을했다. 내가 그것을 조사했을 때 나는 선택이 압도적이라는 것을 알았다.

다행스럽게도 요구 사항에 따라 최상의 로더를 선택하는 데 도움이되는이 훌륭한 스프레드 시트를 찾았습니다.

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

답변

requirejs 프로젝트를 살펴보십시오 .

답변

일반적으로 컴파일 타임에 스크립트를 전처리하고 컴파일 타임 require에도 “경량 심”으로 다시 작성되는 하나의 (또는 매우 적은) 패키지로 묶는 것이 좋습니다 .

나는 그것을 할 수 있어야하는 “새로운”도구를 따라 구글 검색했습니다

그리고 이미 언급 한 것 browserify역시 아주 잘 맞아야합니다. //esa-matti.suuronen.org/blog/2013/04/15/asynchronous-module-loading-with-browserify/

모듈 시스템은 무엇입니까?

답변

항목을로드하는 DOM에 요소를 만들 수 있습니다.

다음과 같이 :

var myScript = document.createElement('script'); // Create new script element
myScript.type = 'text/javascript'; // Set appropriate type
myScript.src = './js/myclass.js'; // Load javascript file