수색…
소개
Transpiling은 특정 프로그래밍 언어를 해석하고 특정 프로그래밍 언어를 특정 대상 언어로 변환하는 프로세스입니다. 이러한 맥락에서 transpiling은 JSR 언어를 컴파일 하여 Javascript의 타겟 언어로 변환합니다.
비고
Transpiling은 소스 코드를 소스 코드로 변환하는 과정이며, JavaScript 개발에서 일반적인 활동입니다.
일반적인 JavaScript 애플리케이션 (Chrome, Firefox, NodeJS 등)에서 사용할 수있는 기능은 최신 ECMAScript 사양 (ES6 / ES2015, ES7 / ES2016 등)보다 뒤떨어져 있습니다. 일단 사양이 승인되면 이후 버전의 JavaScript 응용 프로그램에서 기본적으로 사용할 수 있습니다.
엔지니어는 새로운 JavaScript 릴리스를 기다리는 대신 컴파일러를 사용하여 새로운 사양 용으로 작성된 코드를 기존 응용 프로그램과 호환되는 코드로 변환하여 미래에 실행될 코드를 작성할 수 있습니다 (미래 보장형). 일반적인 transpilers에는 Babel 과 Google Traceur가 있습니다.
Transpilers를 사용하여 TypeScript 또는 CoffeeScript 같은 다른 언어를 일반 "바닐라"JavaScript로 변환 할 수도 있습니다. 이 경우 transpiling은 한 언어에서 다른 언어로 변환합니다.
Transpiling 소개
예제들
ES6 / ES2015 ~ ES5 ( 바벨 경유) :
이 ES2015 구문
// ES2015 arrow function syntax
[1,2,3].map(n => n + 1);
해석되어이 ES5 구문으로 변환됩니다.
// Conventional ES5 anonymous function syntax
[1,2,3].map(function(n) {
return n + 1;
});
CoffeeScript to Javascript (내장 CoffeeScript 컴파일러 사용) :
이 커피 스크립트
# Existence:
alert "I knew it!" if elvis?
해석되고 Javascript로 번역됩니다.
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
어떻게 나는 transpile합니까?
대부분의 컴파일 - 투 - 자바 스크립트 언어 내장 (커피 스크립트 또는 타이프 라이터처럼)을 transpiler 있습니다. 이 경우 구성 설정이나 확인란을 통해 언어의 변환기를 활성화하면됩니다. 고급 설정은 또한 transpiler와 관련하여 설정할 수 있습니다.
ES6 / ES2016-to-ES5 transpiling의 경우, 가장 널리 사용되는 transpiler는 Babel 입니다.
왜 나는 transpile해야합니까?
가장 많이 인용되는 혜택은 다음과 같습니다.
- 새로운 구문을 안정적으로 사용할 수있는 기능
- 모든 브라우저가 아닌 대부분의 브라우저 간의 호환성
- CoffeeScript 또는 TypeScript와 같은 언어를 통해 Javascript에 누락되거나 아직없는 기본 기능 사용
Babel로 ES6 / 7 사용 시작
ES6 에 대한 브라우저 지원 이 늘어나고 있지만 코드가 완벽하게 지원되지 않는 환경에서 코드가 작동하는지 확인하려면 Babel , ES6 / 7 ~ ES5 변환기를 사용해보십시오!
호환성에 대해 걱정할 필요없이 프로젝트에서 ES6 / 7을 사용하려는 경우 노드 및 바벨 CLI를 사용할 수 있습니다
Babel for ES6 / 7 지원을 통한 프로젝트의 빠른 설정
- 노드 다운로드 및 설치
- 폴더로 이동하여 자주 사용하는 명령 줄 도구를 사용하여 프로젝트 만들기
~ npm init
- Babel CLI 설치
~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015
-
.js파일을 저장하는scripts폴더를 만든 다음 transpilation 된 완전히 호환되는 파일이 저장되는dist/scripts폴더를 만듭니다. - 프로젝트의 루트 폴더에
.babelrc파일을.babelrc파일.babelrc파일을 씁니다.
{
"presets": ["es2015"]
}
-
npm init실행할 때 생성 된package.json파일을 편집하고scripts속성에build스크립트를 추가하십시오.
{
...
"scripts": {
... ,
"build": "babel scripts --out-dir dist/scripts"
},
...
}
- ES6 / 7로 프로그래밍 즐기기
- 모든 파일을 ES5로 변환하려면 다음을 실행하십시오.
~ npm run build
더 복잡한 프로젝트를 위해 Gulp 또는 Webpack을 살펴볼 수도 있습니다.