babel 기본 사용 설명

babel이 무엇인가요?63;

babel은 강력한 다용도 js 컴파일러입니다. 접속하세요공식 웹사이트

babel 설치

npm install -g babel-cli 
npm install --save-dev babel-cli

babel 설정 파일

.babelrc를 통해 표현됩니다

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

presets는 일부 프리셋을 저장합니다

plugins는 일부 플러그인을 저장합니다　

명령 줄의 간단한 사용

다음과 같이 사용할 수 있습니다 -o (--out-file) 파일을 컴파일하기 위해

babel es6.js -o es5.js / babel es6 --out-file es5.js

콘텐츠 디렉토리 전체를 컴파일하려면 -d (}}--out-dir) 매개변수

babel　 src -d build / babel　 src --out-dir build

프리셋

지금 es6의 코드를 사용하고 싶다면, 현재로서는 컴파일된 코드는 거의 원본 그대로 복사되었습니다

es6.js

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

를 설치할 수 있습니다-preset-es2015를 통해 es2015의 문법

npm install --save-dev babel-preset-es2015

그런 다음 .babelrc 파일을 통해 설정

{
 "presets": ["es",2015"]
}

이렇게 하면 es2015문법을 분석했습니다. 마지막으로 package.json의 scripts 설정을 통해

"scripts": {
 "build" : "babel src -d build -w"
 }

다음은 명령 줄에서 직접

npm run build

플러그인

babel에서 많은 플러그인이 있습니다. 예를 들어, 아래의 코드를 umd 형식으로 변환하려면 어떻게 해야 하나요?63;

var add = (a,b) =>{
 console.log(a+b)
}
add(1,2)

먼저 해당 플러그인 babel을 찾습니다-plugin-transform-es2015-modules-umd, 이 플러그인을 설치하세요

npm install --save-dev babel-plugin-transform-es2015-modules-umd

설정에 포함

{
 "presets":["es",2015"],
 "plugins":["transform",-es2015-modules-umd"]
}

그런 다음 컴파일 후 우리가 원하는 것입니다

(function (global, factory) {
 if (typeof define === "function" && define.amd) {
 define(["module", "exports"], factory);
 } else if (typeof exports !== "undefined") {
 factory(module, exports);
 } else {
 var mod = {
  exports: {}
 };
 factory(mod, mod.exports);
 global.sum = mod.exports;
 }
})(this, function (module, exports) {
 "use strict";
 Object.defineProperty(exports, "__esModule", {
 value: true
 });
 var sum = function sum(a, b) {
 return a + b;
 };
 exports.default = sum;
 module.exports = exports["default"];
});

gulp 통합

babel은 단독으로 사용할 수 있으며, 빌드 도구(gulp webpack 등)와 함께 사용할 수도 있습니다

먼저 gulp와 gulp에 필요한 babel 플러그인을 다운로드해야 합니다

npm install gulp gulp-babel --save-dev

gulpfile.js를 만들어gulp 설정을 생성합니다

const gulp = require('gulp')
const babel = require('gulp-babel')
gulp.task('babel', ()=>{
 return gulp.src('src/**/*.js')
  .pipe(babel())  
  .pipe(gulp.dest('dist'))
}
gulp.task('default' , ['babel'])

package.json 파일의 scripts를 설정하십시오

"scripts": {
 "dev" : "./node_modules/.bin/gulp"
 }

마지막으로 명령어 실행

npm run dev

이것이 본문의 전부입니다. 본문의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 또한, 외침 교본에 많이 지지해 주시길 바랍니다!

성명서: 본문의 내용은 인터넷에서 가져왔으며, 원작자의 소유입니다. 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 웹사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있는 콘텐츠를 발견하면 notice#w로 이메일을 보내 주세요.3codebox.com에 이메일을 보내면, #을 @으로 바꿔보세요. 신고를 하고 관련 증거를 제공하시면, 사실이 확인되면 해당 콘텐츠를 즉시 삭제할 것입니다.