esbuild를 사용하여 angular cli 응용 프로그램을 구축하는 방법

8695 단어 esbuildangular
esbuild-js 묶음 도구를 사용하여ngcli generate 프로그램을 구축할 수 있는지 궁금하십니까? 이 도구는 속도가 매우 빨라서 점점 인기가 많아지고 있습니다.적어도 하나의 간략한 개념 검증 응용 프로그램이 있다.코드를 조정했습니다.

출발점


내 출발점은 다음과 같이 esbuild 명령입니다.

어떻게 esbuild를 사용하여 최소 각도 12 응용 프로그램을 구축합니까

마신워싱크・ 7월 9일・ 2분 읽기

#angular #esbuild #javascript

ng cli를 사용하여 생성된 코드:
$ npx -p @angular/cli ng new esbuild-ng-cli

최근 패키지 업데이트로 인해 설치가 통과되기 전에 의존항을 조정해야 할 수도 있습니다


esbuild 설치 및 설정


esbuild를 사용하여 구축하는 데 더 많은 절차가 필요합니다.우선,esbuild를 의존항으로 설치:



$ npm install esbuild --save-dev

added 1 package (...)

그리고 스크립트를 구축해야 합니다.esbuild로 완전히 이전하지 않았기 때문에, 나는 npm run build를 창설할 때의 웹 페이지에 남기고 전용 esbuild 스크립트를 추가할 것이다: 



"esbuild": "esbuild src/main.ts --bundle --outfile=dist/main.js --loader:.html=text --minify"

이 명령에 포함된 내용이 매우 적습니다:


  • src/main.ts - 스크립트 입구점입니다. - 거기서부터 esbuild에서 모든 의존항을 찾습니다
  • --bundle - esbuild에 모든 파일을 하나의 묶음 파일로 묶으라고 알려줍니다
  • --outfile=dist/main.js - 구축 목표
  • --loader:.html=text - HTML 파일을 문자열로 해석합니다.그것은 웹 패키지
    • 의 raw-loader와 유사하다
  • --minify - 우리의 코드를 최소화합니다.그것은 각도 주 설정처럼 유효하지는 않지만, 코드를 최적화하지 않는 것보다 훨씬 좋다.

코드에 대한 필요한 조정은 src/app/app.component.ts를 



import { Component } from '@angular/core';

import template from './app.component.html';

@Component({
  selector: 'app-root',
  template,
  // styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'esbuild-ng-cli';
}

templateUrl가 현식 템플릿에 불러와서 바뀌었습니다. 개념 검증 프로그램을 간소화하기 위해 css 가져오기를 삭제했습니다


TS에서 HTML 가져오기를 받아들이려면 index.d.ts와: 



declare module "*.html" {
  const content: string;
  export default content;
}

이 변경 사항이 있으면 구축 과정이 통과된 것을 볼 수 있습니다. 



$ npm run esbuild                   

> [email protected] esbuild
> esbuild src/main.ts --bundle --outfile=dist/main.js --loader:.html=text --minify


  dist/main.js  761.1kb

⚡ Done in 124ms

속도가 인상적입니다. 1초도 안 돼요.불행하게도 번들의 크기는 본 컴퓨터에 설치된 제품보다 훨씬 크다. 170.87kB이지만 구축 시간은 거의 13초이다


esbuild에 특정한 변경이 표준 웹 패키지 구축을 막았음을 주의하십시오. 이 두 버전이 순조롭게 공존할 수 있도록 조정이 필요합니다


HTML 파일


응용 프로그램을 신속하게 테스트하기 위해quick&더러운 html;웹 페이지 출력의 계발을 받다../index.html:



<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>EsbuildNgCli</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<body>
  <app-root></app-root>
<script src="dist/main.js"></script>
</body></html>

현재 페이지를 방문하면 실패합니다: 



Error: In this configuration Angular requires Zone.js

브라우저 콘솔에 있습니다.우리는 ./src/main.ts에 한 줄을 추가해서 이 문제를 해결할 수 있다. 



import 'zone.js';

import { enableProdMode } from '@angular/core';
/** the rest of the file **/

패키지 크기를 798.2kb로 증가합니다


작업 어플리케이션


최종 응용 프로그램은 원시 버전의 작업 원리와 같습니다:


링크



요약


이 저장소에서 전체 코드 라이브러리를 찾을 수 있습니다:




마신워싱크 / esbuild ng cli


ng cli 생성 프로젝트의 esbuild 스크립트 개념 증명




이 화제는 여러 방식으로 전개할 수 있습니다


  • 더 많은 실제 업무 응용
  • css 지원 추가
  • esbuild로 개발 서버 설정
  • real esbuild&웹 패키지 공존 - 아마도 빠른 개발과최적화된 프로덕션 구축
  • ngcli
    • 를 사용하여esbuild 친선 코드의 설명도를 즉시 생성
  • esbuild
    • 로 설정된 기타 코드 생성기

이러한 확장이나 기타 확장에 관심이 있으면 댓글로 알려주세요

express + ejs (페이지 동적 데이터 변화 실현)
UItableView 공백 제거cell에서 불필요한 separator

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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