현대 JavaScript 입문-Node는 무엇입니까?js, npm, ECMAScript, Babel 및 Webpack?

본고에서, 나는 당신이 현대 자바스크립트를 작성하거나 이해하는 것을 지원하는 키워드를 설명할 것입니다.나는 본고가 새로운 JS 학습자나 서버 측 개발자를 도울 수 있기를 바란다.

"현대" JavaScript

우선'현대'는 여기서 무슨 뜻입니까?나는 모듈을 실현하는 것이 JS의 현대화에 가장 중요하다고 생각한다.
모듈은 다른 파일에 정의된 클래스, 함수 등을 사용할 수 있도록 합니다.자바,Python,Ruby,PHP 등 유명한 프로그래밍 언어에 있어서 이것은 매우 흔한 것이지만 자바스크립트는 너무 간단해서 이 기능이 없다.
코드를 모듈로 구조화하는 것은 진지한 개발에 매우 중요하다.모듈을 통해 자바스크립트는 회전목마 이미지나 유사한 것을 둘러싼 이동이 아니라 복잡한 전단 개발을 할 수 있는 언어로 발전했다.
네, 여기서부터 현대 자바스크립트 노드를 구성하는 5가지 키워드를 소개해 드리겠습니다.js、npm、ECMAScript、Babel、Webpack.내가 가능한 한 간단하게 그들이 누구인지 설명하겠다.

노드회사 명

Node.js는 JavaScript 런타임 환경 중 하나입니다.서버에서 JavaScript를 사용하도록 설계되었습니다.
JavaScript 런타임 환경은 다음과 같습니다.

구문을 읽고 해석하는 JavaScript 엔진입니다.

개발자가 각 특정 환경에서 작업하는 기타 객체(API)를 지원합니다.

브라우저 내부에도 내장된 JS 엔진이 있습니다.환경이 어떤 것이든 간에 기본 문법은 반드시 같아야 한다.if는 if이고 Array는 Array입니다.흔히 볼 수 있는 JS 문법 규범을 이해하는 것은 JS 엔진의 작업이다.
이 엔진 위에는 환경에 특정한 기능이 하나 더 있다.
exmaple의 경우 브라우저에서 DOM이나 오디오, 비디오 API를 조작할 수 있습니다.브라우저에만 적용됩니다.
마찬가지로 노드.js는 자신의 기능(Node.js 핵심 모듈)을 가지고 있으며, 이러한 기능은 서버에 있는 파일만 읽기/쓰기에 필수적이다.모듈getElementById도 그 핵심으로 도입했다.
노드js는 자바스크립트로 웹 응용 프로그램과 유사한 서버 사이드 코드를 작성할 수 있지만, 뿐만 아니라, 전방 개발에도 큰 이익을 가져다 줍니다.그것은 개발자로 하여금 컴퓨터에서 자바스크립트 코드를 쉽게 실행할 수 있게 한다.따라서 많은 개발 도구는 노드를 바탕으로 한다.js는 이미 나타났습니다. 예를 들어 Babel, Webpack, Browserify, Gulp 등입니다. 그들은 전단 개발을 더욱 선진적으로 합니다.

npm

npm(노드 패키지 관리자)는 노드의 패키지 관리자입니다.js, 스스로 설명한 것처럼.
요컨대,'포백'은 외부 (제3자) 라이브러리이다.
npm은 다음을 포함합니다.

패키지를 수집하는 데이터베이스(저장소).

CLI 용도:

패키지를 저장소에 업로드

배포 패키지

패키지 다운로드/업데이트

등

npm은 Node와 함께 묶여 있습니다.js 설치.그들은 함께 산다.노드js는 모듈을 도입했고 npm는 제3자 모듈을 발표/사용하는 데 도움을 주었다.나는 그들이 모두 현대 자바스크립트의 주역이라고 생각한다.
참고로 또 다른 유행하는 Node 패키지 관리자도 있습니다.js,yarn.이것은 npm와 같은 환매 프로토콜을 사용하고 CLI는 자신의 것이다.

ECMAScript

ECMAScript는 Ecma 국제 표준화된 JavaScript 언어 규범입니다.
Ecma International은 JavaScript의 새로운 기능을 고려하고 채택했습니다.표준화 프로세스에는 다음 단계가 포함됩니다.

0단계(Strawperson-즉 하나의 생각)

1단계(제안)

2단계(초안)

3단계(후보)

4단계(완료)

각 단계에서 JavaScript 커뮤니티의 사람들은 제안의 특성에 대해 토론하고 돌아봅니다.이러한 단계에서 살아남은 특성은 결국 JavaScript의 일부가 됩니다.
2015년부터 ECMAScript는 매년 새로운 기능을 도입했습니다.각 버전은 ES2019 또는 ES2020과 같은 연도 이후에 명명됩니다.
전단 개발자에게 중요한 것은 자바스크립트의 표준화와 실현은 서로 다른 팀에서 이루어진다는 것이다.
Ecma는 각 브라우저 공급업체에 따라 JavaScript 사양을 결정합니다.일부 브라우저에는 아직 마지막 단계에 들어가지 않은 기능이 포함되어 있을 수도 있고, 다른 브라우저 (그래, 알다시피 IE) 는 새로운 승인 기능을 실현하지 못할 수도 있다.
그래서 이것은 진퇴양난의 문제다.전단 개발자들은 가장 선진적인 기능이나 문법을 사용하기를 원한다.그러나 다른 한편, 모든 브라우저가 이러한 기능을 실현할 수 있는 것은 아니다.
개발자는'멋있지만 기능이 없다'는 코드를 작성하지 않도록 이 점을 분명히 의식해야 한다.당신은 유사한 Can I Use 사이트를 참고로 볼 수 있습니다.
서버 사이드 세계에서 코드가 작동하는 환경을 완전히 제어할 수 있기 때문에 이것은 전단의 특정한 문제라고 생각합니다.
이 곤경에 대해 선진적인 해결 방안이 있다.내가 아래에 전시한 것은 바벨이다.

바베타

Babel는 JavaScript 코드를 다른 구문 버전으로 변환하는 도구입니다.
이것은 표준과 실시 사이의 차이를 해결하는 방법이다.이것은 새 문법을 지정한 브라우저가 이해할 수 있는 낡은 문법으로 변환합니다.똑똑하네.

exmaple에 대해 이 코드는... 으로 변환됩니다.

const func = a => a * 2;

이 코드는babel을 통해 작성되었습니다.

"use strict";

var func = function func(a) {
  return a * 2;
};

이러한 변환 프로세스를 "Transbile"이라고 합니다.그것은'컴파일'과 유사하지만, 다른 것은'컴파일'은 고급 언어에서 기계 언어로의 전환이고,'Transbile'은 고급 언어에서 고급 언어로의 전환이다.
Babel은 JSX와 같은 표준 구문을 해석 가능한 JavaScript로 변환하는 데도 사용됩니다.
playgound page가 있으니 한번 놀고 그 일을 확인할 수 있다.
기본적으로 바벨은 for of,arrow 함수와 클래스만 변환한다.대상 브라우저에 존재하지 않는 방법이나 대상을 자동으로 보충하지 않습니다.
아직 실현되지 않은 방법을 추가했다면polyfills라는 다른 코드 세그먼트를 포함해야 합니다.그럼에도 불구하고babel은 코드 라이브러리에 주입하는 방법을 많이 제공했다.

웹 패키지

Webpack 여러 파일의 의존 관계를 해결하고 브라우저에 우호적인 JavaScript 파일을 생성합니다.
다시 말하면 웹팩은 모듈을 브라우저 영역으로 가져왔다.
위에서 언급한 바와 같이, 노드.js가 모듈을 소개했습니다.이후 모듈의 ECMA 표준import/export도 적용됩니다.

// Node.js
const myModule = require('./my-module.js');

// EcmaScript
import myModule from './my-module.js';

그러나 불행하게도 브라우저에서 모듈을 사용하는 일반적인 방법은 아직 없다.사실상 브라우저 사이드 모듈에 사용되는 standard은 2017년부터 2018년까지 현대 브라우저를 실현했지만 광범위하게 받아들여지지 않았다. 왜냐하면 많은 개발자들이 이 기능을 어떻게 응용해야 할지 모르기 때문이다.
따라서 웹팩은fronded 코드 라이브러리에서 모듈을 사용하는 데 도움을 줄 수 있습니다.이것은 당신의 파일과 당신의 required 또는 requireed의 파일을 조합하여 모듈 문장이 없는 자바스크립트 파일을 생성합니다.
이 프로세스를 "번들"/"번들"이라고 합니다.
exmaple에 대해 import 가져오기 a.js 시 웹팩은 b.js 와 a.js 의 내용을 포함하는 파일을 생성합니다.생성된 파일은 브라우저에 완전히 적용됩니다.
의존 관계와 왜 웹팩이 우리에게 유리한지 한 번 더 생각해 봅시다.
이 exmaple 생각해봐.b.js필요a.js와b.js,e.js필요b.js와c.js.

만약 우리가 모듈이 없는 상황에서 이런 의존 관계를 관리해야 한다면, 그것은 이렇게 될 것이다.

<script src="/js/c.js"></script>
<script src="/js/d.js"></script>
<script src="/js/b.js"></script>
<script src="/js/e.js"></script>
<script src="/js/a.js"></script>

네가 생각하는 바와 같이, 이것은 유지하기 어려울 것이다.d.js과c.js의 주문은 교환할 수 있으나 d.js과d.js는 교환할 수 없습니다.HTML만 보고 해결할 수는 없습니다.이것은 정말 불안정한 수수께끼다.
모듈은 웹 패키지와 함께 이 문제를 해결했다.

우리는 생성된 파일만 포함해야 한다.개발자는 의존 관계를 스스로 관리할 필요가 없다.

<script src="/js/main.js"></script>

Webpack은 CSS나 이미지 파일을 JavaScript로 묶을 수도 있습니다.
여기에 핫이슈가 하나 있다.Webpack은 기본 설정이 있는 JavaScript 파일을 생성합니다.그러나 이것은 문제가 될 수 있다. 왜냐하면 파일이 충분하게 커서 성능에 불리하기 때문이다.
이러한 상황을 처리하기 위해 웹팩은 Code Splitting 기능을 제공했다.이것은 생성된 내용을 여러 파일로 분리하는 기술이다.

끝내다

마지막으로blow는 내가 설명한 도구도와 그것들 사이의 관계이다.

됐어, 이 정도야.요 며칠 동안 전단 개발은 복잡해졌고 JS 문법만 공부해서는 실제 세계를 만드는 응용 프로그램이 부족하다.그래서 저는 본고를 통해 초보자들이 현대 자바스크립트의 세계를 이해하도록 도울 수 있어서 기쁩니다.