babel 설정 파일.babelrc 입문 상세 설명
es6 특성 브 라 우 저 는 아직 모두 지원 되 지 않 았 지만,es6 를 사용 하 는 것 은 대세 이 므 로,babel 은 이에 따라 생 겨 났 으 며,es6 코드 를 브 라 우 저 에서 식별 할 수 있 는 코드 로 변환 하 는 데 사용 되 었 다.
babel 은 전문 적 인 명령 행 도 구 를 제공 하여 코드 를 쉽게 바 꿀 수 있 고 스스로 알 아 볼 수 있 습 니 다.
바벨 이 뭐야?
차세 대 자 바스 크 립 트 문법 컴 파일 러 라 는 공식 설명 이다.
차세 대 자 바스 크 립 트 의 표준 인 만큼 브 라 우 저 는 버 전에 따라 호환성 문제 가 발생 할 수 있 습 니 다.자 바스 크 립 트 의 새로운 방법 은 사용 할 수 없습니다.그러나 현재 우 리 는 프로젝트 개발 에서 최신 문법 사탕 을 사용 하여 작성 하 는 것 을 제창 해 왔 습 니 다.코드 의 양 을 줄 일 수 있 을 뿐만 아니 라 async,await 등 새로운 기능 도 재 조정 하 는 작성 체 제 를 해결 하여 코드 유지 비용 을 줄 일 수 있 습 니 다.
Babel 은 이 로 인해 생 겨 났 습 니 다.대부분의 자바 스 크 립 트 의 새로운 표준 방법 을 안심 하고 사용 한 다음 에 절대 다수의 주류 브 라 우 저 를 호 환 하 는 코드 로 컴 파일 할 수 있 습 니 다.프로젝트 프로젝트 비계 에 서 는 일반적으로'babelrc 파일'을 사용 하고 일부 매개 변 수 를 설정 하여 웹 팩 과 결합 하여 압축 합 니 다.또한 인터넷 을 통 해 알 수 있 듯 이 쓰기 방법 이 각각 다 르 고 매개 변수 도 크게 다 르 기 때문에 저 는 자 료 를 다시 정리 하고 각 설정 항목 의 의 미 를 상세 하 게 소개 하여 사용 하면 명확 하 게 이해 할 수 있 습 니 다.
다음 설정 은 주로 웹 팩 3+쓰기 입 니 다.
Babel 번역기
.babelrc 설정 파일 에 서 는 프 리 셋(presets)과 플러그 인(plugins)을 설정 하기 때문에 서로 다른 컨버터 역할 이 다른 설정 항목 은 크게 다음 과 같은 세 가지 로 나 눌 수 있 습 니 다.
1.문법 전의 기.주로 javascript 의 최신 문법 설탕 을 컴 파일 합 니 다.javascript 에 추 가 된 api 와 전체 대상 을 번역 하 는 것 은 책임 지지 않 습 니 다.예 를 들 어 let/const 는 컴 파일 될 수 있 지만 includes/Object.assign 등 은 컴 파일 될 수 없습니다.자주 사용 되 는 번역 기 는 babel-preset-env,babel-preset-es 2015,babel-preset-es 2016,babel-preset-es 2017,babel-preset-latest 등 이 있다.실제 개발 에 서 는 남 은 것 대신 babel-preset-env 만 사용 할 수 있 지만 자바 scirpt 의 제작 규범 과 함께 사용 해 야 하 며 공식 추천 이기 도 합 니 다.
{
"presets": ["env", {
"modules": false
}],
"stage-2"
}
__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()
미리 설정 만 들 기(presets)
주로 npm 를 통 해 babel-preset-xx 플러그 인 을 설치 하여 사용 합 니 다.예 를 들 어 npm install babel-preset-stage-2 babel-preset-env-save-dev 를 통 해 설치 하면 다음 과 같은 설정 이 있 습 니 다.
{
"presets": [
["env", options],
"stage-2"
]
}
babel 은 주로 다음 과 같은 몇 가지 전의 패 키 지 를 제공 합 니 다.괄호 안 은 설정 파일 에 대한 설정 항목 입 니 다.
babel-preset-stage-0(stage-0)
babel-preset-stage-1(stage-1)
babel-preset-stage-2(stage-2)
babel-preset-stage-3(stage-3)options 설정 소개
공식 적 으로 babel-preset-env 를 사용 하여 플러그 인 패키지 의 설치(es2015-arrow-functions,es2015-block-scoped-functions 등)를 대체 하 는 것 을 추천 합 니 다.또한 다음 과 같은 몇 가지 설정 정보 가 있 습 니 다.자주 사용 하 는 것 을 소개 합 니 다.
더 많은 설정 은 홈 페이지https://babeljs.io/docs/plugins/preset-env/를 참고 할 수 있 습 니 다.
{
"targets": {
"chrome": 52,
"browsers": ["last 2 versions", "safari 7"],
"node":"6.10"
}
"modules": false
}
targets.node 에서 node 버 전 을 컴 파일 하고 있 습 니 다.
modules 는 보통 false 로 설정 합 니 다.기본 값 은 CommonJS 규범 을 지원 하 는 동시에 다른 설정 매개 변수 도 있 습 니 다."amd"|"umd"|"systemjs"|"comonjs",systemjs 는 규범 적 인 쓰기 방법 이 무엇 인지 모 르 겠 습 니 다.amd 와 umd,그리고 comonjs 는 상대 적 으로 잘 알 고 있 습 니 다.다음은 간략하게 작성 규범 을 열거 하 겠 습 니 다.
amd 코드 규범 은 ng1 에서 많이 사용 되 며 주로 주입 에 의존 합 니 다.
define(['jquery'], function ($) {
//
function myFunc(){};
//
return myFunc;
})
var $ = require('jquery');
//
function myFunc(){};
// （ ）
module.exports = myFunc;
{% endcodeblock %}
>umd ， amd commonjs ， ：
{% codeblock lang:javascript %}
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node, CommonJS
module.exports = factory(require('jquery'));
} else {
// (root window)
root.returnExports = factory(root.jQuery);
}
}(this, function ($) {
//
function myFunc(){};
//
return myFunc;
}));
플러그 인 설정 항목 은 미리 설 정 된 설정 항목 과 마찬가지 로 babel 에 해당 하 는 플러그 인 을 조합 하여 설정 해 야 합 니 다.설정 플러그 인 을 선택 하여 하나의 수 요 를 만족 시 킬 수 있 습 니 다.예 를 들 어 초기 에 우 리 는 다음 과 같은 설정 이 있 었 습 니 다.
{
"plugins": [
"check-es2015-constants",
"es2015-arrow-functions",
"es2015-block-scoped-functions",
// ...
]
}
{
"presets": [
"es2015"
]
}기본 설정 코드 는 다음 과 같 습 니 다.
{
"plugins": [
"syntax-dynamic-import",["transform-runtime"]
]
}
이러한 전역 대상 이나 전역 대상 방법 컴 파일 이 부족 한 상황 을 해결 하기 위해 transform-runtime 플러그 인 이 나 타 났 습 니 다.그러나 이 플러그 인 은 es6 의 문법 만 바 꾸 고 새로운 api 를 바 꾸 지 않 습 니 다.새로운 api 를 바 꾸 려 면 babel-poly fill 을 사용 하여 호환성 문 제 를 피 할 수 있 습 니 다.
Object.assign 을 컴 파일 합 니 다.웹 팩 을 통 해 컴 파일 된 코드 세 션 을 설정 하고 설정 하지 않 은 것 은 다음 과 같 습 니 다.
// ：
__webpack_require__("ez/6");
var aaa = 1;
function fna() {
var dd = 33333;
var cc = Object.assign({ key: 2 });
var xx = String.prototype.repeat.call('b', 3);
if ("foobar".String.prototype.includes("foo")) {
var vv = 1;
}
return dd;
}
// ：
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign__);
__webpack_require__("ez/6");
var aaa = 1;
function fna() {
var dd = 33333;
var cc = __WEBPACK_IMPORTED_MODULE_1_babel_runtime_core_js_object_assign___default()({ key: 2 });
var xx = String.prototype.repeat.call('b', 3);
if ("foobar".String.prototype.includes("foo")) {
var vv = 1;
}
return dd;
}
// ：
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Canvas = function Canvas(height, width) {
_classCallCheck(this, Canvas);
this.height = height;
this.width = width;
};
var Canvas2 = function Canvas2(height, width) {
_classCallCheck(this, Canvas2);
this.height = height;
this.width = width;
};
// ：
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck__);
var Canvas = function Canvas(height, width) {
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas);
this.height = height;
this.width = width;
};
var Canvas2 = function Canvas2(height, width) {
__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_classCallCheck___default()(this, Canvas2);
this.height = height;
this.width = width;
};공식 적 으로 는 promise 에 도 컴 파일 이 생 긴 다 고 했 지만 실제 테스트 결 과 는 효과 가 없 었 다.
웹 팩 패키지 최종 테스트 를 통 해 transform-runtime 이 설정 항목 을 도입 하면 패키지 입구 js 파일 의 크기 가 약간 커 집 니 다.공식 적 으로 말 한 것 처럼 파일 의 부 피 를 줄 일 수 있 는 것 이 아 닙 니 다.
설정 되 지 않 은 최종 패키지 효과:
설정 후 최종 포장 효과:
파일 크기 가 커지 지만 호환성 문 제 를 해결 하 는 동시에 상기 테스트 코드 예 를 들 어 transform-runtime 을 사용 하면 내부 전역 함수 의 정 의 를 줄 일 수 있 습 니 다.구조 적 으로 웹 팩 의 모듈 화 사상 을 존경 하 므 로 이 플러그 인 을 사용 하 는 것 을 권장 합 니 다.
syntax-dynamic-import
이 플러그 인 은 주로 동적 도입 모듈 의 문 제 를 해결 합 니 다.
function nDate() {
import('moment').then(function(moment) {
console.log(moment().format());
}).catch(function(err) {
console.log('Failed to load moment', err);
});
}
nDate();
그렇지 않 으 면 다음 과 같은 실 수 를 할 것 이다.
ignore
주요 역할 은 그 코드 들 을 컴 파일 하지 않 고 지정 할 수 있다 는 것 이다.
{
"ignore":["./module/a.js"]
}
__webpack_require__("ez/6");
const aaa = 1;
function fna () {
let dd = 33333
let cc = Object.assign({key:2})
let xx = String.prototype.repeat.call('b', 3)
if ("foobar".String.prototype.includes("foo")) {
let vv = 1
}
return dd
}
function fna2 () {
return fna() + aaa + __WEBPACK_IMPORTED_MODULE_0__b__["a" /* default */]
}
class Canvas {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Canvas2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
컴 파일 후 압축 여 부 를 주로 설정 합 니 다.boolean 형식 입 니 다.babel-cli 를 사용 하여 압축 파일 을 압축 하면 이 설정 항목 은 역할 을 할 수 있 습 니 다.그러나 현재 대부분 제3자 포장 도구,예 를 들 어 webpack 에 의존 하기 때문에 이 설정 매개 변 수 는 설정 하지 않 아 도 됩 니 다.webpack 플러그 인 에 있 는 UglifyJSPlugin 은 압축 작업 을 했 습 니 다.
comments
생 성 된 파일 에 주석 이 생기 지 않 습 니 다.boolean 형식,webpack 플러그 인 에 있 는 UglifyJSPlugin 도 이 기능 을 통합 하 였 습 니 다.
env
기본 설정 은 다음 과 같 습 니 다.
{
"env": {
// test ， BABEL_ENV NODE_ENV， development
"test": {
"presets": ["env", "stage-2"],
// instanbul
"plugins": ["istanbul"]
}
}
}
Babel 은 기본적으로 새로운 JavaScript 문법 만 바 꾸 고 새로운 API 를 바 꾸 지 않 습 니 다.예 를 들 어 Iterator,Generator,Set,Maps,Promise 등 전역 대상 과 전체 대상 에 정 의 된 방법(예 를 들 어 Object.assign)은 바 꾸 지 않 습 니 다.구체 적 으로 는 babel-plugin-transform-runtime 모듈 의definitions.js파일 을 참고 할 수 있 습 니 다.
이 는 주로 babel 컴 파일 후에 도 브 라 우 저 호환성 문제 가 존재 합 니 다.일반적으로 transform-runtime 과 babel-poly fill 을 사용 하여 사용 합 니 다.후 자 는 프로젝트 입구 파일 require 에 만 도입 하면 됩 니 다.
물론 Object.assign 함수 와 유사 한 기능 을 사용 할 때 lodash 라 이브 러 리 를 사용 하여 대체 할 수 있 습 니 다.promise 는 Q.js 대체 등 방안 을 사용 할 수 있 습 니 다.이렇게 의존 하면 상기 플러그 인 을 도입 하지 않 아 도 됩 니 다.구체 적 으로 프로젝트 에 따라 구체 적 으로 배정 할 수 있 습 니 다.
총결산
.babelrc 설정 파일 은 주로 presets 와 plugins 로 구성 되 어 있 으 며,웹 팩 과 의 협 조 를 통 해 사용 되 며,프로젝트 에서 자주 사용 하 는 설정 을 공유 합 니 다.이상 은 모두 학습 을 통 해 총 결 된 것 인 데,무슨 잘못 이 있 는 지 지적 하고 싶 습 니 다.
vue 프로젝트 개발 에 사용 할 설정 은 다음 과 같 습 니 다.
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
// ，
"comments": false,
"plugins": ["transform-runtime","syntax-dynamic-import"],
"env": {
// test ， BABEL_ENV NODE_ENV， development
"test": {
"presets": ["env", "stage-2"],
// instanbul
"plugins": ["istanbul"]
}
}
}
{
"presets": [
["env", { "modules": false }],
"stage-2",
"react"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
세계에서 가장 간단한 서버 측 노드로 ES6을 시작하는 방법서버 측 node는 commonjs로 작성되는 경우가 많네요. 프런트 엔드 사람은 commonjs를 보면 ES6가 사용하고 싶어서 어쩔 수 없게됩니다. commonjs도 훌륭하지만 모처럼이므로 익숙한 ES6에서 개발...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
