분류 javascript

JavaScript Transpilers : 왜 그것이 필요로 하는가? II

컨텐츠 정보

  • 조회 192 (작성일 )

본문

바벨 CLI 설정 


라이브 REPL은 매끄럽지 만 전체 코드베이스를 그렇게 쓰면 빠를 것입니다. 자발적으로 일을 하고 바벨 CLI를 설치합시다.


시작하려면 :

  1. 어딘가에 디렉토리를 만드십시오.
  2. NPM 프로젝트로 초기화하십시오.
  3. 사용하려는 사전 설정 및 플러그인과 함께 Babel 도구를 설치하십시오.
  4. 이러한 사전 설정과 플러그인을 사용하도록 Babel을 구성하십시오.
# This moves to your home directory to create the folder. 
# If you don't want it there, cd somewhere else.
cd && mkdir babel_example && cd $_
npm init
# Hit ENTER a bunch of times . . . 
npm install --save-dev babel-cli babel-preset-es2015 babel-plugin-transform-async-to-generator

그러면 Babel CLI (babel-cli)가 설치됩니다. 바벨이 지원하는 모든 ES2015 기능을 지원하는 플러그인 모음 (babel-preset-es2015); ES7 제안, 비동기 기능 (babel-plugin-transform-async-to-generator)을 사용할 수 있는 플러그인이 포함되어 있습니다.


Babel을 실행하려면 babel <FILENAME>을 입력하기 만하면 됩니다. 하지만 그렇게 하기 전에 어떤 플러그인을 사용할 지 알려줄 필요가 있습니다. Babel은 NPM 프로젝트의 최상위 레벨 인 .babelrc 파일에서 이 정보를 찾습니다.


{
    "presets": ["es2015"],
    "plugins": ["transform-async-to-generator"]
}

이제 Planet 클래스가 있는 스니펫을 index.js로 복사하고 babel index.js --out-file index.transpiled.js --source-maps를 실행합니다. 그러면 index.transpiled.js에 index.js의 변환 된 버전이 생성되고 별도의 sourcemap 파일 인 index.transpiled.js.map이 생성됩니다. 소스 맵은 변환 된 코드의 어떤 행이 원본 소스의 어떤 행과 일치하는지 브라우저에 알리는 파일이므로 index.js를 직접 디버깅 할 수 있습니다.


변경 사항을 저장할 때마다 파일을 이동하려는 경우 다음을 실행할 수 있습니다.


babel index.js --out-file index.transpiled.js --source-maps --watch 



빌드 도구 


바벨 CLI와 함께 사용할 수 있는 몇 가지 다른 옵션이 있습니다. 그러나, 당신이 상상할 수 있는 것처럼, 사용하고 있는 다른 도구들 위에 무엇을 구성 할 것인지를 결정하는 것은 다루기 힘들게 될 수 있습니다.


우리를 위해, 실행 바벨 - 시계는 충분합니다. 그러나 사소한 프로젝트의 경우 구축, 축소, 미니 파일링, 출력물 구성, 업데이트해야 할 사항 결정, 이미지 최적화 등의 빌드 단계가 필요합니다. . . 그것은 마치 악몽처럼 느껴집니다.


CLI를 직접 사용하는 경우 각 단계를 수동으로 실행하거나 직접 스크립트를 작성해야 합니다. 두 번째 옵션은 확실히 실행 가능하지만 다음과 같이 할 수 있습니다.

  1. Brittle; 
  2. Difficult for teams; 
  3. Unportable across platforms.

Grunt와 Gulp는 빌드 프로세스를 간소화하는 인기 있는 시스템입니다. 다른 기사에서 읽을 수 있는 Webpack, JSPM 및 Browserify와 같은 번들 및 모듈 로더는 작동하는 다른 모든 마법과 함께 증발을 처리합니다.


나는 BrowserJP를 사용하여 CoffeeScript로 작성된 테스트를 일반 JS로 옮겼습니다. 테스트가 실행 된 후 출력을 삭제하십시오. 그리고 그들이 모두 통과하면 바벨과 내 코드를 묶어 라. 그 길을 따라 소스 맵을 사용하여 모든 것을 올바른 위치에 배치하십시오. 이 모든 것이 명령 행 도구를 사용하여 직접 가능하지만, 취성이 있습니다.


당신은 저를 믿을 수 있습니다 - 저는 이것을 위해 bash 스크립트를 사용했습니다. 그 리눅스의 죽음은 나를 물지 않기 위해 다시 온다. 그리고 여러 모듈 형식을로드해야하거나 핫 모듈 교체를 시도하려는 경우에는 빌드 시스템으로 전환 할 수밖에 없습니다.


결론


Transpilers에서 벗어나기가 어렵습니다. JavaScript로 컴파일하는 언어를 작성하든, 또는 ES015를 안정적으로 사용하든 관계 없습니다. 우리는 후자 그룹의 사람들로부터 피드백이 TC39위원회가 JavaScript의 향후 방향에 대한 결정을 내리는 데 중요한 지침이 된다는 것을 알았습니다.


우리는 바벨 CLI를 사용하여 ES2015를 소스 맵으로 전환하는 방법을 살펴보고 더 복잡한 프로젝트에서 추출이 간소화되도록 하는 도구에 대해 배웠습니다.


Jame Kyle의 Babel Handbook은 Babel에 대한 모든 것입니다. Webpack에 관심이 있다면 How-To를 읽어보십시오.