it-source

Angular 빌드에서 'es6'(또는 접미사가 전혀 없음)가 아닌 'es5'와 'es2015'로 파일을 만드는 이유는 무엇입니까?

criticalcode 2023. 6. 10. 09:27
반응형

Angular 빌드에서 'es6'(또는 접미사가 전혀 없음)가 아닌 'es5'와 'es2015'로 파일을 만드는 이유는 무엇입니까?

나는 최근에 다운로드했습니다.Angular CLI(@vmx/cli 9.0.1).그런 다음 새로운 애플리케이션을 생성하여 새 Angular Element를 생성하고 패키지화하여 다른 애플리케이션에서 사용할 수 있도록 했습니다.

몇 개의 블로그를 추적한 후, 제가 발견한 모든 블로그의 마지막 단계는 dist/폴더 아래에 있는 생성된 파일에서 단일 JS 파일을 만드는 것에 대해 이야기합니다.예: https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457

그런 다음 cat 명령을 사용하여 dist/angular-app 폴더에 있는 runtime.js, polyfills.js, script.js main.js 파일을 미리 보기 폴더 내의 각진 app.js 파일로 연결합니다.

입니다.ng build angular-app --prod --output-hashing=none대신 다음 이름의 파일을 생성하는 것 같습니다.

  • main-es5.js
  • main-es2015.js
  • 폴리필즈-es5.js
  • 폴리필즈-es2015.js
  • runtime-es5.js
  • runtime-es2015.js

es5와 es2015라는 용어가 있는 모든 파일을 검색하여 es6로 변경했지만 여전히 동일한 es5es2015 파일 이름을 생성했습니다.내가 여기서 뭘 잘못하고 있는 거지?

Angular는 JavaScript 파일을 하나의 파일로 묶지 않습니다.

빌드 단계를 추가하여 파일을 함께 연결할 수 있습니다.

concat-build.js:

var concat = require('concat');
const es5 = ['./dist/app/runtime-es5.js','./dist/app/polyfills-es5.js','./dist/app/main-es5.js'];
const es2015= ['./dist/app/runtime-es2015.js','./dist/app/polyfills-es2015.js','./dist/app/main-es2015.js'];
concat(es5, './dist/app/elements-es5.js');
concat(es2015, './dist/app/elements-es2015.js');

꾸러미json:

"scripts": {
   "concat": "node ./concat-builds.js",
   "build": "ng build --prod --output-hashing=none && npm run concat"
}

ES5와 ES2015 빌드를 혼동하지 마십시오. Angular 팀은 모듈이 로드되는 방식에 따라 번들을 분할합니다(JavaScript 버전에서는 그렇지 않습니다).

모듈을 지원하는 웹 브라우저는 ES5 버전 대신 ES2015 버전을 로드하지만 둘 다 Html로 하는 것이 좋습니다.

단일 파일만 사용하려면 이전 ES5 버전을 사용해야 하며 다음과 같이 제공해야 합니다.

<script src="elements-es5.js">

다음과 같이 두 파일을 모두 제공하는 것이 좋습니다. 그러면 브라우저가 적절한 버전을 로드합니다.

<script src="elements-es5.js" nomodule defer>
<script src="elements-es2015.js" type="module">

참고:

이전 브라우저는 다음을 무시합니다.type="module"버전, 그리고 새로운 브라우저들은 건너뛸 입니다.nomodule판본

ES2015는 ES6와 동일합니다. ECMA스크립트 6은 2015년에 출시되었습니다.

일부 기록:

https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c

그것들은 같은 것입니다.

6판 - ECMA스크립트 2015

  • 6판 ECMA스크립트 -> ES6
  • ECMA스크립트 2015 -> ES2015

같은 것에 대한 다른 이름.Angular는 단순히 ites 2015라고 부르기로 선택했습니다.

언급URL : https://stackoverflow.com/questions/60192247/why-does-angular-build-create-files-with-es5-and-es2015-but-not-es6-or-no

반응형