Node.js와 브라우저 간에 코드를 공유하려면 어떻게 해야 하나요?

Node.js와 브라우저 간에 코드를 공유하려면 어떻게 해야 하나요?

WebSocket을 사용하여 통신하는 JavaScript 클라이언트(브라우저에서 실행)와 Node.js 서버를 사용하여 작은 애플리케이션을 만듭니다.

클라이언트와 서버 간에 코드를 공유하고 싶습니다.저는 Node.js를 시작한 지 얼마 되지 않았고, 적어도 현대 자바스크립트에 대한 저의 지식은 녹슬었습니다.그래서 나는 아직도 공동체에 대해 생각하고 있다.JS require() 함수.내보내기 개체를 사용하여 패키지를 만드는 경우 브라우저에서 동일한 JavaScript 파일을 사용할 수 없습니다.

메시지 인코딩 및 디코딩 및 기타 미러링된 작업을 용이하게 하기 위해 양단에서 사용되는 메서드 및 클래스 세트를 만들고 싶습니다.단, Node.js/Common은JS 패키징 시스템에서는 양쪽에서 사용할 수 있는 JavaScript 파일을 만들 수 없는 것 같습니다.

JS도 써봤어요.좀 더 촘촘한 OO모델을 얻기 위한 클래스였지만, 제공된 JavaScript 파일을 require()와 연동시키는 방법을 알 수 없어서 포기했습니다.제가 뭘 놓쳤나요?

클라이언트 측과 서버 측을 모두 사용할 수 있는 모듈을 작성하려면 빠르고 쉬운 방법에 대한 짧은 블로그 투고를 작성하십시오.Node.js 및 브라우저에 대한 기술(기본적으로 다음과 같은 경우)this is is is is is와 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 함수를 노출할 수 있는 DNode에도 관심이 있을 수 있습니다.

Epeli는 라이브러리 없이도 동작할 수 있는 훌륭한 솔루션을 http://epeli.github.com/piler/에 제공하고 있습니다.공유라는 파일에 저장하기만 하면 됩니다.

(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()'d가 되어 클라이언트에 송신할 수 있도록 함수와 컨스트럭터를 캡슐화된 방법으로 간단하게 쓸 수 있습니다.

또 다른 방법은 빌드 시스템을 사용하여 공통 코드를 별도의 파일에 넣은 후 서버와 클라이언트스크립트 양쪽에 포함시키는 것입니다.서버와 클라이언트가 기본적으로 같은 게임 루프를 실행하고 클라이언트가 서버와 동기화하여 부정행위를 하지 않도록 하는 WebSockets를 통한 심플한 클라이언트/서버 게임에 이 방법을 사용하고 있습니다.

게임용 빌드 시스템은 간단한 Bash 스크립트입니다.C 프리프로세서를 경유하여 파일을 실행한 후 sed를 경유하여 정크 CPP를 정리합니다.따라서 #include, #define, #ifdef 등의 일반적인 프리프로세서를 모두 사용할 수 있습니다.

이 요건에 대해 알아볼 것을 권장합니다.Node.js용 JS 어댑터.문제는 '공통'이기본적으로는 Node.js가 사용하는 JS 모듈 패턴은 비동기적이지 않으며, 이로 인해 웹 브라우저에서 로딩이 차단됩니다.요구하다JS는 AMD 패턴을 사용합니다.AMD 패턴은 비동기적이며 서버 및 클라이언트와 모두 호환성이 있습니다.r.js★★★★★★★★★★★★★★★★★★.

이게 질문하고 완전히 일치하는 건 아닐지도 모르지만, 이걸 공유해야겠다고 생각했어요.

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

my_node_script.my_node.syslog

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

my_code_code.displays

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

저는 이것이 저 이외의 사람에게 유용한 정보이기를 바랍니다.

웹 팩 등의 모듈번들을 사용하여 브라우저에서 사용하기 위해 JavaScript 파일을 번들하는 경우 브라우저에서 실행되는 프런트엔드에 Node.js 모듈을 간단히 재사용할 수 있습니다.즉, Node.js 모듈은 Node.js와 브라우저 간에 공유할 수 있습니다.

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

Normal 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

는 단순히 소스 할 수 , 한 것은 가 JavaScript를 사용하기 전에 입니다.exec모듈로 저장할 수 있습니다.

이러한 환경을 만드는 간단한 방법은 폐쇄를 사용하는 것입니다.들어 소스 합니다. 예를 들어, "HTTP"는 "HTTP"와 같습니다.http://example.com/js/foo.js브라우저는 XMLHttpRequest를 통해 필요한 파일을 로드하고 다음과 같이 코드를 로드할 수 있습니다.

ajaxRequest({
  method: 'GET',
  url: 'http://example.com/js/foo.js',
  onSuccess: function(xhr) {
    var pre = '(function(){var exports={};'
      , post = ';return exports;})()';
    window.fooModule = eval(pre + xhr.responseText + post);
  }
});

중요한 것은 클라이언트가 외부 코드를 익명 함수로 랩하여 즉시 실행할 수 있다는 것입니다(폐쇄). 이 함수는 "exports" 객체를 생성하여 반환하므로 글로벌 이름 공간을 오염시키지 않고 원하는 위치에 할당할 수 있습니다.예에서는 "Atribute"에.fooModule 파일에는 됩니다.foo.js.

이전 솔루션 중 공통을 가져오는 것은 없습니다.브라우저로의 JS 모듈시스템

다른 답변에서 설명한 바와 같이 Browserify 또는 Piler와 같은 자산 매니저/패키지 솔루션과 dnode 또는 nowjs와 같은 RPC 솔루션이 있습니다.

''의 수 .(「JS(」를 한다)require() 과 " " " 입니다.exportsmodule.exports오브젝트 등)를 참조해 주세요.그래서 제가 직접 썼는데, 나중에 다른 사람이 저보다 더 잘 썼다는 걸 알게 됐어요. https://github.com/weepy/brequire.Brequire(브라우저 요구의 줄임말)라고 합니다.

인기로 판단하건대, 자산 관리자들은 대부분의 개발자들의 요구에 부합합니다.단, CommonJs의 브라우저 구현이 필요한 경우에는 Brequire가 적합합니다.

2015년 갱신:Brequire를 사용하지 않게 되었습니다(몇 년 동안 업데이트되지 않았습니다).만약 제가 작은 오픈 소스 모듈을 쓰고 있고, 누구나 쉽게 사용할 수 있도록 하고 싶다면, 저는 Caolan의 답변과 비슷한 패턴을 따르겠습니다. 저는 몇 년 전에 그것에 대해 블로그에 글을 올렸습니다.

단, 프라이빗 용도 또는 CommonJs에 표준화된 커뮤니티(Ampersand 커뮤니티 등)를 위해 모듈을 작성하는 경우에는 Common으로 작성합니다.JS 형식을 지정하고 Browserify를 사용합니다.

사용 사례: Node.js와 브라우저 간에 앱 구성을 공유합니다(이것은 단순한 그림일 뿐 앱에 따라서는 최적의 접근 방식은 아닐 수 있습니다).

아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, .window하지 않습니다) (Node.js에는 존재하지 않습니다).global(어느 쪽인가 하면)

편집: 및 Node.js > = 12로 이동할 수 있습니다.

구식 솔루션:

• 파일 config.js:

    var config = {
      foo: 'bar'
    };
    if (typeof module === 'object') module.exports = config;
  

• 브라우저(index.html):

    <script src="config.js"></script>
    <script src="myApp.js"></script>
  

  이제 개발 도구를 열고 전역 변수에 액세스할 수 있습니다.config

• Node.js(app.js):

    const config = require('./config');
    console.log(config.foo); // Prints 'bar'
  

• Babel 또는 TypeScript 사용 시:

    import config from './config';
    console.log(config.foo); // Prints 'bar'
  

now.filength도 볼만합니다.클라이언트측에서 서버측을 호출하고 서버측에서 클라이언트측 함수를 호출할 수 있습니다.

브라우저를 Node.js와 같은 스타일로 쓰고 싶다면 이중화를 시도할 수 있습니다.

브라우저 코드 컴파일이 없기 때문에 제한 없이 어플리케이션을 작성할 수 있습니다.

[ Require ](요구)로 코드를 기입합니다.JS모듈과 당신의 테스트는 재스민 테스트입니다.

이 방법 코드는 Require와 함께 어디에서나 로드할 수 있습니다.JS 및 테스트는 코드 또는 테스트를 변경할 필요 없이 브라우저에서 Jasmine-html 및 Node.js의 jasmine-node를 사용하여 실행됩니다.

다음은 이에 대한 작업 예입니다.

Import할 수 있는 간단한 모듈(노드의 require 또는 브라우저의 스크립트태그를 사용하여 클라이언트와 서버 양쪽에서 모듈을 로드할 수 있음)을 작성했습니다.

사용 예

1. 모듈의 정의

다음 파일을 파일에 저장합니다.log2.js정적 웹 파일 폴더 내:

let exports = {};

exports.log2 = function(x) {
    if ( (typeof stdlib) !== 'undefined' )
        return stdlib.math.log(x) / stdlib.math.log(2);

    return Math.log(x) / Math.log(2);
};

return exports;

그렇게 간단해!

2. 모듈 사용

쌍방향 모듈로더이므로 양쪽(클라이언트 및 서버)에서 로딩할 수 있습니다.따라서 다음 작업을 수행할 수 있지만 특정 순서는 말할 것도 없고 동시에 둘 다 수행할 필요도 없습니다.

• 노드 내

노드에서는 다음과 같이 간단합니다.

var loader = require('./mloader.js');
loader.setRoot('./web');

var logModule = loader.importModuleSync('log2.js');
console.log(logModule.log2(4));

이것은 반환될 것입니다.2.

파일이 노드의 현재 디렉토리에 없는 경우는, 반드시 다음의 URL 에 연락해 주세요.loader.setRoot정적 웹 파일 폴더(또는 모듈이 있는 곳)에 대한 경로를 지정합니다.

• 브라우저에서:

먼저 웹 페이지를 정의합니다.

<html>
    <header>
        <meta charset="utf-8" />
        <title>Module Loader Availability Test</title>

        <script src="mloader.js"></script>
    </header>

    <body>
        <h1>Result</h1>
        <p id="result"><span style="color: #000088">Testing...</span></p>

        <script>
            let mod = loader.importModuleSync('./log2.js', 'log2');

            if ( mod.log2(8) === 3 && loader.importModuleSync('./log2.js', 'log2') === mod )
                document.getElementById('result').innerHTML = "Your browser supports bilateral modules!";

            else
                document.getElementById('result').innerHTML = "Your browser doesn't support bilateral modules.";
        </script>
    </body>
</html>

브라우저에서 파일을 직접 열지 않도록 하십시오. AJAX를 사용하므로 Python 3의 파일을 살펴보시기 바랍니다.http.server모듈(또는 초고속, 명령줄, 폴더 웹 서버 도입 솔루션 등)을 선택합니다.

모든 것이 정상적으로 진행되면 다음과 같이 표시됩니다.

모든 변수를 글로벌 스코프로 설정하는 경우는, 간단하게 사용할 수 있습니다.

(function(vars, global) {
    for (var i in vars) global[i] = vars[i];
})({
    abc: function() {
        ...
    },
    xyz: function() {
        ...
    }
}, typeof exports === "undefined" ? this : exports);

언급URL : https://stackoverflow.com/questions/3225251/how-can-i-share-code-between-node-js-and-the-browser