Browserify 시도 (node.js의 require 메소드를 브라우저에서 사용)

경위


  • node-webrtc 의 샘플 코드 해석해, 서버측의 node.js 의 JavaScript인가, 브라우저용의 JavaScript인가, 혼란스러웠다
  • node-webrtc에 대해서는 별도로 정할 예정

  • node-webrtc 샘플에서 Browsers를 사용하여 "node.js 용 JavaScript"를 "브라우저 용 JavaScript"로 변환하는 것으로 나타났습니다.
  • node-webrtc 코드를 분석 할 수 있도록 Browsers의 최소 지식을 습득하기 위해 요약합니다.


    환경


  • Windows 10
  • node v16.8.0
  • npm 7.21.1

  • npm


  • node-webrtc에서 사용하는 node-fetch 버전과 일치합니다.
  • 자세한 내용은 하단의 소스 코드를 참조하십시오.
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    +-- [email protected]
    `-- [email protected]
    

    Browserify란?


  • require 메소드를 브라우저에서 사용할 수있게하는 마법 같은 기술

  • Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.



    node-fetch를 node.js에서 실행



    구현 코드


  • 다음 HTTP 요청을 수행하는 코드는 node.js
  • 별도, http://localhost:5000/file.txt 를 준비해 둔다
  • HTTP 요청이 성공하여 파일을 검색 할 수 있는지 확인

  • example.js
    const fetch = require('node-fetch');
    
    async function Fetch() {
        const response = await fetch('http://localhost:5000/file.txt', {method: 'GET'});
    
        const body = await response.text();
        console.log(body);
    }
    
    Fetch();
    

    실행 결과


  • HTTP 요청 성공
  • c:\BrowserifyExample>node example.js
    The test succeeded.
    

    require('node-fetch')를 브라우저에서 실행


  • 패키지 측에 설치 Browserify를 실행하여 브라우저에서 실행되는 JavaScript로 변환
  • node ./node_modules/browserify/bin/cmd.js example.js -o public/bundle.js
    
  • 출력한 파일을 HTML로 참조한다
  • <!DOCTYPE html>
    <html>
    <body>
    <h1>Open the Console on your browser.</h1>
    
    <script src="bundle.js"></script>
    
    </body>
    </html>
    
  • node.sj의 HTTP 서버를 시작하여 브라우저에서 Fetch를 사용할 수 있는지 확인하십시오.
    node ./node_modules/serve/bin/serve.js ./public
    



    익스프레스 프레임워크와 협력


  • browserify-middleware를 사용하면 서버 측에서 require ()가있는 node.js에 대한 JavaScript를 브라우저에서 처리 할 수있는 JavaScript로 변환하여 반환 할 수 있습니다.
  • 다음과 같은 코드로 express 프레임 워크와 연동 할 수 있습니다
    const browserify = require('browserify-middleware');
    const express = require('express');
    const app = express();
    
    app.use(`/`, browserify("./example.js"));
    
    const server = app.listen(3000, () => {
        const address = server.address();
        console.log(`http://localhost:${address.port}\n`);
     });
    

    변환된 JavaScript 코드





    소스 코드

  • 좋은 웹페이지 즐겨찾기