[javascript] Node.js와 브라우저간에 코드를 공유하려면 어떻게해야합니까?

WebSocket을 사용하여 통신하는 JavaScript 클라이언트 (브라우저에서 실행)와 Node.js 서버로 작은 응용 프로그램을 만들고 있습니다.

클라이언트와 서버간에 코드를 공유하고 싶습니다. 방금 Node.js로 시작했으며 현대 JavaScript에 대한 내 지식은 조금 녹슨 것입니다. 그래서 나는 여전히 CommonJS require () 함수를 둘러보고 있습니다. ‘export’객체를 사용하여 패키지를 작성하는 경우 브라우저에서 동일한 JavaScript 파일을 사용하는 방법을 볼 수 없습니다.

메시지 인코딩 및 디코딩, 기타 미러링 된 작업을 용이하게하기 위해 양쪽 끝에 사용되는 메서드 및 클래스 집합을 만들고 싶습니다. 그러나 Node.js / CommonJS 패키징 시스템은 양면에서 사용할 수있는 JavaScript 파일을 만드는 것을 방해합니다.

또한 JS.Class를 사용하여 더 단단한 OO 모델을 얻으려고 시도했지만 제공된 JavaScript 파일을 require ()와 함께 작동시키는 방법을 알 수 없기 때문에 포기했습니다. 내가 여기서 놓친 것이 있습니까?



답변

당신이 두 클라이언트 측 및 서버 측을 사용할 수있는 모듈을 작성하려면, 나는 빠르고 쉬운 방법에 관한 짧은 블로그 게시물이 : 쓰기는 Node.js를 브라우저에 대한 본질적 다음은 (여기서 this과 동일 window) :

(function(exports){

    // Your code goes here

   exports.test = function(){
        return 'hello world'
    };

})(typeof exports === 'undefined'? this['mymodule']={}: exports);

또는 Marak의 gemini 와 같이 클라이언트 측에서 Node.js API를 구현하려는 일부 프로젝트가 있습니다 .

간단한 JSON 기반 네트워크 프로토콜을 사용하여 다른 시스템에서 JavaScript 함수를 호출 할 수 있도록 JavaScript 함수를 노출 할 수 있는 DNode에 관심이있을 수도 있습니다 .


답변

Epeli는 http://epeli.github.com/piler/ 여기 에 라이브러리 없이도 작동 하는 멋진 솔루션을 제공 합니다. 이것을 share.js라는 파일에 넣으십시오.

(function(exports){

  exports.test = function(){
       return 'This is a function from shared module';
  };

}(typeof exports === 'undefined' ? this.share = {} : exports));

서버 측에서는 다음을 사용하십시오.

var share = require('./share.js');

share.test();

그리고 클라이언트 측에서 js 파일을로드 한 다음 사용하십시오.

share.test();


답변

Node.js 모듈 패턴, AMD 모듈 패턴 및 브라우저에서 전역 적으로 작동하도록하는 jQuery 소스 코드를 확인하십시오.

(function(window){
    var jQuery = 'blah';

    if (typeof module === "object" && module && typeof module.exports === "object") {

        // Expose jQuery as module.exports in loaders that implement the Node
        // module pattern (including browserify). Do not create the global, since
        // the user will be storing it themselves locally, and globals are frowned
        // upon in the Node module world.
        module.exports = jQuery;
    }
    else {
        // Otherwise expose jQuery to the global object as usual
        window.jQuery = window.$ = jQuery;

        // Register as a named AMD module, since jQuery can be concatenated with other
        // files that may use define, but not via a proper concatenation script that
        // understands anonymous AMD modules. A named AMD is safest and most robust
        // way to register. Lowercase jquery is used because AMD module names are
        // derived from file names, and jQuery is normally delivered in a lowercase
        // file name. Do this after creating the global so that if an AMD module wants
        // to call noConflict to hide this version of jQuery, it will work.
        if (typeof define === "function" && define.amd) {
            define("jquery", [], function () { return jQuery; });
        }
    }
})(this)


답변

JavaScript 함수의 문자열 표현은 해당 함수의 소스 코드를 나타냅니다. 함수와 생성자를 캡슐화 된 방식으로 작성하여 toString ()하고 클라이언트로 보낼 수 있습니다.

또 다른 방법은 빌드 시스템을 사용하고 공통 코드를 별도의 파일에 넣은 다음 서버와 클라이언트 스크립트 모두에 포함시키는 것입니다. 서버와 클라이언트가 본질적으로 동일한 게임 루프를 실행하고 클라이언트가 서버와 동기화하여 아무도 부정 행위를하지 않는 WebSockets를 통해 간단한 클라이언트 / 서버 게임 에이 접근법을 사용하고 있습니다.

게임의 빌드 시스템 은 C 전처리기를 통해 파일을 실행 한 다음 sed를 통해 정크 cpp 잎을 정리 하는 간단한 Bash 스크립트이므로 #include, #define, #ifdef와 같은 일반적인 전 처리기 항목을 모두 사용할 수 있습니다 등


답변

Node.js 용 RequireJS 어댑터를 살펴 보는 것이 좋습니다 . 문제는 기본적으로 Node.js가 사용하는 CommonJS 모듈 패턴이 비동기 적이 지 않으므로 웹 브라우저에서로드를 차단한다는 것입니다. RequireJS는 어댑터를 사용하는 한 비동기 및 서버 및 클라이언트와 호환되는 AMD 패턴을 사용합니다 r.js.


답변

어쩌면 이것이 질문과 완전히 일치하지는 않지만 공유 할 것이라고 생각했습니다.

String.prototype에 선언 된 두 개의 간단한 문자열 유틸리티 함수를 노드와 브라우저 모두에서 사용할 수 있도록 만들고 싶었습니다. 이 함수를 간단히 utilities.js (하위 폴더에있는) 파일에 보관하고 브라우저 코드의 스크립트 태그와 Node.js 스크립트에서 require (.js 확장자 생략)를 사용하여 쉽게 참조 할 수 있습니다. :

my_node_script.js

var utilities = require('./static/js/utilities')

my_browser_code.html

<script src="/static/js/utilities.js"></script>

이것이 다른 사람에게 유용한 정보가되기를 바랍니다.


답변

브라우저에서 사용하기 위해 webpack 과 같은 모듈 번 들러 를 사용하여 JavaScript 파일을 번들로 제공하는 경우 브라우저에서 실행되는 프론트 엔드에 Node.js 모듈을 재사용하면됩니다. 즉, Node.js 모듈은 Node.js와 브라우저간에 공유 될 수 있습니다.

예를 들어 다음 코드 sum.js가 있습니다.

일반 Node.js 모듈 : sum.js

const sum = (a, b) => {
    return a + b
}

module.exports = sum

Node.js에서 모듈 사용

const sum = require('path-to-sum.js')
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

프론트 엔드에서 재사용

import sum from 'path-to-sum.js'
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7