요약을 사용하여 단일 페이지 애플리케이션(SPA)에 서비스를 제공하는 방법js 및 웹 개발 서버

이전 기사에서는 TypeScript 항목을 설정하기 위해 Rollup을 사용하는 방법에 대해 설명했습니다.js.그 글에서 나는 Project Setup TypeScript와 통합 설정을 사용하여 구축을 준비하는 필요한 절차를 소개했다.
따라서 이 프로젝트를 시작으로 현대 웹 도구를 사용하여 한 페이지 응용 프로그램에 서비스를 제공할 것입니다.

SPA(단일 페이지 애플리케이션)란?

근거 MDN Documentation:

An SPA (single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

단일 페이지 응용 프로그램은 현재 페이지의 일부분만 업데이트할 수 있으며, 페이지를 새로 고칠 수 없습니다.매일 사용하는 애플리케이션을 생각해 보십시오.

Gmail

Facebook

트위터

영영

모든 이 프로그램들은 사용자 체험과 좋은 불러오는 속도와 페이지 사이의 내비게이션을 고려했다.
SPAs 방법을 사용하여 애플리케이션을 계속 구축할 수 있는 좋은 이유가 있습니다.

웹 개발 서버란 무엇입니까?

Web Dev Server는 말 그대로 개발에 사용되는 웹 서버이다.ES 모듈과 같은 네이티브 브라우저 기능을 사용하여 개발하는 데 도움이 됩니다.그것은 코드 변환에 사용되는 플러그인 구조를 가지고 있다.

Web Dev Server is the successor of es-dev-server

특히 웹 Dev Server에서는 구성 파일이 변경될 때 자동으로 다시 로드되고 더 빨리 다시 로드할 수 있는 효율적인 브라우저 캐시를 제공합니다.그것의 설정과 지원rollup plugins은 너무!

프로젝트 설정

선결 조건

로컬 환경에 다음 도구를 설치해야 합니다.

노드js.가장 좋은 것은 최신식LTS version이다.

소포 관리원.너는 NPM이나 실을 사용할 수 있다.이 자습서는 NPM을 사용합니다.

프로젝트 초기화

새 구성 및 도구를 추가하기 전에 클론 또는 프로젝트 피드를 만듭니다.

git clone https://github.com/luixaviles/typescript-rollup.git
cd typescript-rollup/
git checkout tags/01-setup-ts-rollup -b 02-serve-spa

앞의 명령은 항목을 다운로드하고 새 지점 02-serve-spa 을 만들어서 시작합니다.

다운로드 소스 코드 파일

프로젝트가 준비되면 가장 좋아하는 코드 편집기를 사용하여 열고 현재 프로젝트 구조를 확인합니다.

|- typescript-rollup
    |- src/
        |- math/
            |- math.ts
            |- index.ts
        |- string/
            |- string.ts
            |- index.ts
        |- app.ts
    |- package.json
    |- rollup.config.js
    |- tsconfig.json

웹 개발 서버 및

프로젝트에 개발 의존 항목을 추가합시다.

웹 개발 서버 설치

npm install --save-dev @web/dev-server

앞서 언급한 바와 같이 이번 웹SEV 서버는 우리 프로젝트를 설정하고 실행하는 주요 도구가 될 것입니다.
또한 es-dev-server 도구가 계획에서 적극적으로 사용되고 있음을 알고 있다면 프로젝트가 Open Web Components 사이트로 이전되었음을 알 수 있습니다.이것은 이 새로운 도구를 제외한 모든 것이 계속 적극적으로 개발되고 자바스크립트 프로젝트 (TypeScript; - 포함) 에 사용될 수 있다는 것을 의미하지 않는다.

설치 도구

npm install --save-dev concurrently

명령줄 도구에 익숙하면 명령을 병행으로 실행하기를 원할 수도 있습니다.
Modern Web도 같은 목표가 있다.그러나 모든 명령의 출력을 추적하기 어렵고 concurrently 원하는 명령을 실행할 수 있습니다.만약 누군가가 실패한다면 그들을 모두 죽일 수도 있다.

동시에 유형 스크립트 구성

이 경우 tsconfig.json 파일은 변경되지 않고 그대로 유지됩니다.

{
  "compilerOptions": {
    "target": "es2018",                          
    "module": "esnext",
    "moduleResolution": "node",                     
    "noEmitOnError": true,
    "lib": ["es2017"],                            
    "strict": true,  
    "esModuleInterop": false,                 
    "outDir": "out-tsc",
    "rootDir": "./"
  }
  ,
  "include": ["./src/**/*.ts"]
}

이 파일은 의 루트 디렉터리에 존재해야 한다는 것을 기억하십시오.

타자 스크립트 항목 요약 구성

이 항목은 모듈 귀속기로 설정되어 있습니다.명령줄 매개 변수를 통해 그것을 실행할 수 있습니다.그러나 고급 기능을 찾는 경우에는 rollup.config.js 파일을 고려할 수 있습니다.

import merge from 'deepmerge';
import { createBasicConfig } from '@open-wc/building-rollup';

const baseConfig = createBasicConfig();

export default merge(baseConfig, {
  input: './out-tsc/src/app.js',
  output: {
      dir: 'dist',
  }
});

이 파일에는 기본 설정이 포함되어 있습니다.구축 설정 input 파일과 output 디렉터리가 필요합니다.
이제 단일 페이지 애플리케이션을 컴파일하려고 하므로 몇 가지 변경 사항을 적용할 필요가 있습니다.

import merge from 'deepmerge';
import { createSpaConfig } from '@open-wc/building-rollup';

const baseConfig = createSpaConfig({
  developmentMode: process.env.ROLLUP_WATCH === 'true',
  injectServiceWorker: false
});

export default merge(baseConfig, {
  // any <script type="module"> inside will be bundled by Rollup
  input: './index.html'
});

baseConfig 내용은 createSpaConfig에서 생성되며 Rollup 패키지에서 정의됩니다.createSpaConfig를 사용할 때 워크박스를 사용하여 서비스 직원을 생성합니다.단, index.html를 사용하면 서비스 담당자는 injectServiceWorker 파일에 주입됩니다.

# 개방식 화장실/건축 총결산 HTML 파일을 입력으로

input 파일 설정index.html 파라미터를 사용하면 그 일부로 정의된 모듈은 모두 집합을 통해 귀속됩니다.이 컨텐트는 HTML 파일 결과에 주입됩니다.

색인html 파일

루트 폴더에 다음 내용을 포함하는 index.html 파일을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Single Page Application</title>
</head>
<body>
    <h1>Welcome to your Single Page Application</h1>
    <span>This App uses:</span>
    <ul>
        <li>TypeScript</li>
        <li>Rollup.js</li>
        <li>es-dev-server</li>
    </ul>
    <script type="module" src="./out-tsc/src/app.js"></script>
</body>
</html>

우리는 이 문서의 내용이 매우 흔하다고 말할 수 있다.그러나 가장 중요한 행은 app.js 파일에 대한 참조입니다.

<script type="module" src="./out-tsc/src/app.js"></script>

그곳에서 무슨 일이 일어났는지 설명해 봅시다.

파일 세트 tsconfig.json "outDir": "out-tsc" 는 TypeScript 컴파일러가 ./out-tsc 폴더에 출력 파일을 생성한다는 것을 기억할 수 있습니다.

그리고 index.html 파일은 원본 코드의 입구점, 즉 ./src/app.ts 파일의 컴파일된 버전을 인용한다.

통합 설정이 응용 프로그램을 구축하기 시작할 때 index.html 파일에 정의된 모듈을 사용하여 준비된 패키지를 생성합니다.

서비스 및 구축 스크립트 추가

package.json 파일이 생성될 스크립트를 정의했습니다.

...
"scripts": {
    "build": "rimraf dist && tsc && rollup -c rollup.config.js"
},
...

rollup.config.json 파일에 도입된 변경 사항은 구축 프로세스에 영향을 주지 않습니다.
이제 "서비스"애플리케이션을 추가하는 작업을 계속해 보겠습니다.

... 
"scripts": {
    "tsc:watch": "tsc --watch",
    "start": "concurrently --kill-others --names tsc,web-dev-server \"npm run tsc:watch\" \"web-dev-server --app-index index.html --node-resolve --open --watch\"",
    "build": "rimraf dist && tsc && rollup -c rollup.config.js"
},
...

-'tsc:watch'는 tsc를 통해 컴파일 프로세스를 시작하는 스크립트이며, tsc는 TypeScript 컴파일러입니다.--watch param은 감시 모드에서 컴파일러를 실행하는 컴파일러 옵션을 나타냅니다. (파일이 바뀔 때 다시 컴파일러를 터치합니다.)

'start' 는 병렬 명령의 실행을 추가하는 스크립트입니다. npm run tsc:watch 와 web-dev-server, 그 중 일부 를 포함합니다.

명령이 먼저 호출되었음을 알았습니다!

(concurrently 매개 변수는 명령이 사망--kill-others 또는 tsc할 때 모든 호출된 명령을 종료합니다.

만약 우리가 미래에 더 많은 설정을 추가할 계획이라면, "start"명령의 외관을 고려해 보십시오. 물론, 이것은 읽거나 유지하기 어려운 스크립트입니다.

CLI 플래그 웹 개발 서버를 추가합니다.배치하다.js 파일

매개변수로 CLI 플래그를 포함하는 대체 옵션은 생성web-dev-server 파일입니다.

The file extension can be .js, .cjs or .mjs. A .js file will be loaded as an es module or common js module based on your version of node, and the package type of your project.

기본적으로 웹 개발 서버는 현재 작업 디렉토리의 구성 파일을 봅니다.
루트 폴더web-dev-server.config.js 파일을 만듭니다.

// web-dev-server.config.js

module.exports = {
    port: 8000,
    nodeResolve: true,
    open: true,
    watch: true,
    appIndex: 'index.html',
};

이 파일은 현재 시작 스크립트에서 사용한 것과 같은 옵션을 포함하고 사용자 정의 포트 번호를 추가했습니다: web-dev-server.config.js. 현재 설정할 수 있습니다.
간단한 설명을 위해 새 구성 파일에 대한 참조를 사용하여 시작 스크립트를 업데이트합니다.

... 
"scripts": {
    ...
    "start": "concurrently --kill-others --names tsc,web-dev-server \"npm run tsc:watch\" \"web-dev-server --config web-dev-server.config.js\"",
    ...
},
...

이렇게!다음 도구를 사용하여 첫 번째 응용 프로그램을 제공할 준비가 되었습니다.

npm run start

다음과 같은 출력이 표시되어야 합니다.

Web Dev Server started...
[web-dev-server] 
[web-dev-server] Root dir: /Users/luixaviles/projects/typescript-rollup
[web-dev-server] Local: http://localhost:8000/
[web-dev-server] Network: http://192.168.1.2:8000/
[web-dev-server]

또한 기본 브라우저가 열려 port: 8000 내용을 표시합니다.

오른쪽에 있는 (개발 도구를 열 때) 메인 스크립트 파일의 출력을 볼 수 있습니다.SPA가 로드될 때 모듈이 정상적으로 작동하고 있음을 증명합니다.

구축 실행

스크립트가 준비되어 있어서 업데이트할 필요가 없습니다.다음 명령을 실행합니다.

npm run build

이렇게 하면 다음과 같은 내용이 포함된 폴더index.html가 생성됩니다.

|- dist/
    |- 7b857f5b.js
    |- index.html
    |- ... other scripts

로컬에서 이러한 파일을 제공하는 간단한 방법 중 하나는 dist 도구(명령행 http 서버)를 사용하는 것입니다.

http-server dist/ -o

이 명령의 출력에는 응용 프로그램 빌드 버전에 액세스하는 데 필요한 호스트 및 포트가 표시됩니다.

Starting up http-server, serving dist/
Available on:
  http://127.0.0.1:8080
  http://192.168.1.2:8080
Hit CTRL-C to stop the server
open: http://127.0.0.1:8080

http-server 파일의 내용을 보고 최신 명령을 실행하기 전에 설치되었는지 확인하는 것이 좋습니다 .

http 서버 프로젝트의 소스 코드

이 GitHub 저장소에서 전체 항목을 찾습니다: .별 하나 주는 거 잊지 마.⭐️ 코드를 가지고 놀다.
문제가 있으면 언제든지 연락 주세요.계속해서 저typescript-rollup를 주목해 주시고 제 일에 대한 더 많은 정보를 얻으세요.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소,GraphQL,Node,Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 방문GitHub하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 thisdotlabs.com를 참조하십시오.

Reference

이 문제에 관하여(요약을 사용하여 단일 페이지 애플리케이션(SPA)에 서비스를 제공하는 방법js 및 웹 개발 서버), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thisdotmedia/how-to-serve-a-single-page-application-spa-using-rollup-js-and-web-dev-server-6pj

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)