ESM을 지원하는 개발 서버

9458 단어 moduletypescriptesmjavascript

소개



오늘날 코딩하는 동안 JavaScript modules(ESM)을 광범위하게 사용하지만 브라우저가 전역 모듈을 처리하는 방법을 모르기 때문에 아직 모듈 기반 코드를 배포할 수 없습니다. 예를 들어 AppRun을 사용하여 애플리케이션을 개발할 때 apprun의 글로브 모듈이 필요합니다.

import app from 'apprun'


브라우저는 apprun을 가져오는 방법을 모릅니다. 따라서 우리는 여전히 웹팩, 롤업 또는 소포와 같은 JavaScript 번들러를 사용하여 모듈을 번들해야 합니다.

그러나 적어도 지금은 모듈을 사용하여 개발 프로세스를 가속화할 수 있습니다. 최근 Snowpack 팀은 개발 프로세스 속도를 높이기 위해 모듈을 활용하는 Unbundled Development 개념을 도입했습니다.

과거에는 컴파일 후 unpkg에서 전역 모듈을 모듈 링크로 변환하는 도구를 찾거나 빌드하려고 생각했습니다.

The npm package CDN, unpkg.com supports delivering modules for along time. We can load apprun as a module from unpkg.



import app from 'https://unpkg.com/apprun?module'


이제 개발 서버는 다르고 더 나은 아이디어인 것 같습니다. 그래서 라이브 서버를 포크해서 AppRun용 개발 서버를 만들었습니다.

이 게시물은 apprun-dev-server이라는 AppRun 개발 서버를 소개하는 것입니다.

apprun-dev-server



Unbundled Development 개념을 따르는 ES 모듈을 사용하여 JavaScript/TypeScript를 개발하기 위한 정적 웹 서버입니다.
  • unpkg.com에서 ES 모듈을 제공합니다.
  • live-server을 기반으로 하므로 페이지를 자동으로 다시 로드합니다
    • .
  • 또한 애플리케이션 상태를 유지하면서 모듈/구성 요소를 감지하고AppRun 교체할 수 있습니다.



    • apprun-dev-server의 가장 좋은 부분은 핫 모듈 교체를 처리하기 위해 구성 요소에 코드가 필요하지 않다는 것입니다. 구성 요소 상태를 유지합니다. 모듈을 교체합니다. 그런 다음 상태를 되돌립니다. 모두 자동으로 완료됩니다.

    상태를 새로 고치려면 F5(Windows) 또는 Command+R(Mac)을 눌러 브라우저에서 페이지를 다시 로드할 수 있습니다.

    사용하는 방법



    구성 요소를 기본 모듈 내보내기로 내보냅니다.

    import { app, Component } from 'apprun';

export default class AboutComponent extends Component {
  state = 'About';
  view = state => <div>
    <h1>{state}</h1>
  </div>;
  update = {
    '#About': state => state,
  };
}


    그런 다음 기본 파일에서 구성 요소를 사용합니다.

    import About from './About';

new About().start('my-app');


    그런 다음 HTML에서 모듈 형식의 스크립트 태그를 사용합니다.

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AppRun SPA</title>
</head>
<body>
  <script type="module" src="/dist/main.js"></script>
</body>
</html>


    감시 모드에서 컴파일러, TypeScript 또는 Babel을 켭니다. 그런 다음 npx를 사용하여 apprun-dev-server를 시작합니다.

    npx apprun-dev-server


    Apprun-dev-server는 파일 변경 사항을 모니터링합니다. 변경된 JavaScript 파일(*.js) 파일에 전역 모듈이 있는 경우. Apprun-dev-server는 unpkg에 대한 전역 모듈의 참조를 대체합니다. 서버 콘솔에서 앞에 '......' 점이 있는 파일 이름이 보이면 수정된 파일입니다.

    Apprun-dev-server는 live-server와 마찬가지로 index.html에 JavaScript 코드 스니펫을 삽입합니다. 또한 Apprun-dev-server는 AppRun을 감지하고 AppRun 구성 요소를 교체하는 논리를 추가합니다.

    예제 앱을 다운로드하여 사용해 볼 수 있습니다.

    npx degit yysun/apprun-esm-server my-app


    구성



    프로젝트에 apprun-dev-server.config.js를 만듭니다.

    module.exports = {
  port: 8181, // Set the server port. Defaults to 8080.
  host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
  root: "public", // Set root directory that's being served. Defaults to cwd.
  open: false, // When false, it won't load your browser by default.
  ignore: '', // comma-separated string for paths to ignore
  file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
  wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
  mount: [], // Mount a directory to a route.
  logLevel: 2, //
}


    향후 계획



    apprun-dev-server가 컴파일러/로더를 호출하는 것을 원하지 않습니다. Watch 모드에서 TypeScript 컴파일러를 사용하는 것은 완벽합니다. Apprun-dev-server는 모듈을 제공하는 웹서버입니다. 아무것도.

    Webpack은 현재 프로덕션 코드를 빌드하는 데 여전히 필요하고 권장됩니다.

    노드 모듈 폴더 크기가 문제입니다. Apprun-dev-server는 npx에서 실행할 수 있습니다. 노드 모듈에 살 필요는 없습니다. 그러나 npm 설치 및 거대한 node-modules 폴더에서 벗어나지는 않습니다. 참조 패키지, ESLint, Jest가 여전히 필요하기 때문입니다. 향후 npm 개선에 행운을 빕니다.

    위의 의견을 바탕으로 apprun-dev-server를 단순하게 유지하겠습니다. 키스!

    시도해보고 풀 요청을 보내십시오.

    https://github.com/yysun/apprun-dev-server
    J2SE 제5장--배열
    실수를 저지르면서 포착합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage