Babel 설치 및 구성 튜토리얼 사용 방법

babel은 ES6 코드를 ES5 코드로 변환하여 기존 환경에서 실행할 수 있도록 하는 널리 사용되는 트랜스코더입니다. 이 글은 주로 바벨의 사용 및 설치 구성을 소개합니다. 바벨이 필요한 친구들은

Introduction

을 참고하세요. 바벨은 ES6 코드를 ES5 코드로 변환하여 오늘날에도 사용할 수 있도록 널리 사용되는 트랜스코더입니다. 환경 실행이 있습니다. 이는 기존 환경이 이를 지원하는지 여부에 대해 걱정하지 않고 이제 ES6에서 프로그램을 작성할 수 있음을 의미합니다.

설치 및 구성

npm install babel-cli --save-dev 또는 cnpm install babel-cli --save-dev Taobao 미러를 사용하여 설치가 더 빨라질 것입니다. npm install babel-cli --save-dev 或者 cnpm install babel-cli --save-dev使用淘宝镜像安装会更快。

步骤：进入项目 ==>cnpm install babel-cli --save-dev

为什么不安装在全局

如果安装在全局，那意味着项目要运行，全局环境必须有bable，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的babel。

设定转码规则

根目录下安装：cnpm install babel-preset-es2015 --save-dev

安装完成之后，再创建配置文件 .babelrc这个文件，得放在项目根目录下，它的基本格式是：

{
  "presets":[],
  "plugins":[]
}

presets字段设置的就是转码规则，plugins是设置的babel的插件。然后配置文件：

{
  "presets":["es2015"]
}

到这里，关于babel的基本配置就完成了。

实例演示：

在项目根目录下创建demo.js

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);

因为我们现在是将babel安装到了当前目录下，所以不能直接在终端中babel转换命令，得使用npm来运行，所以先在packge.json中编写

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js"
 }
}

进入根目录，npm run build运行，查看结果

也可以输出到指定的目录

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js --out-file bunder.js"
 }
}

进入根目录，npm run build

단계: 프로젝트 입력==>cnpm install babel-cli --save-dev

전역적으로 설치하면 안 되는 이유

전역적으로 설치하면 프로젝트가 실행된다는 뜻입니다. 환경에는 바벨이 있어야 합니다. 즉, 프로젝트는 환경에 의존합니다. 반면, 다른 버전의 Babel을 사용하는 다른 프로젝트는 지원하지 않습니다.

트랜스코딩 규칙 설정

루트 디렉터리에 설치: cnpm install babel-preset-es2015 --save-dev

설치가 완료된 후 구성 파일을 생성합니다. babelrc 이 파일은 프로젝트 루트 디렉터리에 있어야 합니다. 기본 형식은 다음과 같습니다.

rrreeepresets 필드는 트랜스코딩 규칙을 설정하고, 플러그인은 Babel 플러그인 설정입니다. 그런 다음 구성 파일: rrreee

이제 바벨의 기본 구성이 완료되었습니다.

예제 데모: 🎜🎜🎜🎜프로젝트 루트 디렉터리에 데모.js 생성🎜rrreee🎜현재 디렉터리에 babel을 설치했기 때문에 터미널에서 babel 명령을 직접 변환할 수 없습니다. npm을 사용해야 합니다. 실행하므로 먼저 package.json에 🎜rrreee🎜를 쓰고 루트 디렉터리에 npm run build를 입력한 후 실행하고 결과를 확인하세요🎜🎜🎜🎜지정된 디렉터리로 출력할 수도 있습니다🎜rrreee🎜루트 디렉터리로 들어가 npm run build code>를 실행하여 결과를 확인하세요🎜 🎜🎜🎜🎜이번에는 루트 디렉터리에 컴파일된 바인더.js 파일이 있습니다. 🎜🎜Folder 스크린샷🎜🎜🎜🎜🎜위 내용은 제가 모두를 위해 컴파일한 내용입니다. 앞으로는 모두에게 도움이 되세요. 🎜🎜관련 기사: 🎜🎜🎜ES6의 맵, 세트, ​​배열 및 객체 비교(자세한 튜토리얼) 🎜🎜🎜🎜Angular를 사용하여 변경 감지를 구현하는 방법🎜🎜🎜🎜vue-star에서 별점 구성 요소 개발을 구현하는 방법 🎜🎜

위 내용은 Babel 설치 및 구성 튜토리얼 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!