이 글은 es6의 바벨 사용법을 소개합니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.
polyfill
우리 모두는 js에 항상 호환성 문제가 있다는 것을 알고 있지만, 다른 언어에도 호환성 문제가 있습니다. C++ 및 Java와 같은 호환성 문제가 있지만 그 호환성은 이전 버전의 새로운 기능의 비호환성인 반면 js에는 온갖 종류의 이상한 비호환성이 있습니다. 여기에는 매우 복잡한 역사적, 역사적 이유가 있으므로 여기서는 자세히 설명하지 않겠습니다. 과거에는 호환성 문제를 해결할 수 있는 방법이 딱 하나 있었는데, 바로 폴리필(Polyfill)이었습니다. 먼저 폴리필에 대해 이야기해 보겠습니다. 예를 들어 새로운 배열 포함 방법을 사용하려면 최신 버전의 브라우저에서 직접 사용할 수 있습니다.
#🎜🎜 ##🎜 🎜#
그러나 ie10과 같은 이전 브라우저에서는 다음과 같은 오류가 보고됩니다.
#🎜 🎜## 🎜🎜#이 경우 메소드를 사용자 정의하여 해결할 수 있습니다: 
function includesPolyfill(){
if(!Array.prototype.includes){
Array.prototype.includes=function(element){
for(var i=0; i<this.length></this.length>
# 🎜🎜##🎜 🎜#
이것은 폴리필이지만 폴리필에는 한계가 있습니다. 기존 방법을 사용하여 구현할 수 있는 새로운 기능의 경우 폴리필을 사용할 수 있습니다. 예를 들어 Array.prototype.includes는 화살표 함수, const 등과 같은 기존 메서드를 사용하여 구현할 수 없는 일부 새로운 기능과 새 구문의 경우에는 아무 것도 할 수 없습니다. 시간이 지나면 다른 방법(사전 컴파일 또는 문법 변환)을 사용해야 합니다.
이전 js 개발에서는 사전 컴파일 과정이 없었고 js를 마친 후 바로 배포했습니다. 그러나 프론트엔드 엔지니어링의 발전과 함께 사전 컴파일(pre-compilation)도 등장했습니다. 특히 타이프스크립트(typescript), 코딩, 퍼블리싱 등의 언어가 등장한 이후에는 더 이상 예전의 방식이 아닙니다.
이제 게시하기 전에 항상 패키징해야 하며 패키징에는 리소스 통합, 코드 최적화, 압축 및 난독화 등 많은 프로세스가 있습니다... 코드 작업에 새로운 기능을 추가할 수 있습니다. 구문은 새 구문을 지원하기 위해 이전 구문으로 변환됩니다. 간단히 말하면 새 구문->컴파일러->이전 구문입니다.
컴파일러의 기능은 입력 소스 코드의 새로운 기능을 구문으로 변환하는 것입니다. 직설적으로 말하면 화살표 함수 처리와 같은 문자열 처리입니다. var add=(num1 , num2)=> num1+num2, ie10과 같은 화살표 함수와 호환되지 않는 환경에서는 이 코드를 실행할 수 없습니다. #
하지만 소스 코드를 var add=로 변환할 수 있습니다. function(num1, num2){return num1+num2} 를 구문 변환 및 컴파일 처리를 통해 화살표 기능을 지원하지 않는 브라우저에서도 사용할 수 있도록 합니다
이제 화살표 함수만 지원하는 간단한 컴파일러를 구현해 보겠습니다.
function translate(src){
let [_, name, args, body]=src.match(/\((.+)\)=>(.+)/)
return `function ${name}(${args}){return ${body}}`
}
간단하게 하기 위해 간단한 정규 추출을 사용하여 예외 처리 없이 실험을 수행합니다 translate('var add=(num1, num2)=>num1+num')
// var add=function(num1, num2){return num1+num2}Use babel
물론 이런 컴파일러를 직접 작성하는 것은 불가능하므로 그래도 프로젝트를 해야 합니까? 이때 우리가 의지할 수 있는 것은 바벨이 그런 것입니다. 다음으로 바벨을 사용해 화살표 함수를 파싱하겠습니다 
$ mk babel-demo $ cd babel-demo $ npm init -y
$ npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions
@babel/core: 코어 라이브러리
@babel/ cli: 명령줄 도구
@babel/plugin-transform-arrow-functions: 화살표 함수 구문 변환 플러그인 작성 코드:
var add=(num1, num2)=>num1+num2
Use
Analytic$ npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o bundle.js
-o: 출력 파일
查看转化结果
查看新生成的bundle.js，可以发现，箭头函数被转化成了普通的funciton， 在任何环境中都支持。
var add = function (num1, num2) {
return num1 + num2;
};说明
所以，对于新特性，我们可以通过使用polyfill，也可以通过语法转化来达到兼容。
babel配置文件
很明显，使用babel cli的局限性很大，容易出错、不直观、繁琐等，所以babel还是支持配置文件的方式：
.babelrc方式
在项目新建.babelrc文件，并使用JSON语法配置
{
"presets": [...],
"plugins": [...]
}直接写在package.json的babel节点
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}<span style="font-family: 微软雅黑, Microsoft YaHei;">babel.config.js方式</span>
module.exports = function () {
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}两种方式大同小异，区别就是一个是动态的，一个是静态的，推荐小项目就用.babelrc，大项目就使用babel.config.js
babel配置之plugin
plugin是babel中很重要的概念，可以说，plugin才是构成babel扩展性的核心，各种各样的plugin构成了babel的生态，可以在这里看一些babel的插件列表。
.babelrc配置文件中配置插件
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}这时候我们再执行npx babel index.js -o bundle.js，就可以不指定plugin也能正常转化箭头函数了
如果一个plugin可以配置参数，则可以这么配置：
{
"plugins": [
["@babel/plugin-transform-arrow-functions", { "spec": true }]
]
}babel配置之preset
在一个项目中，我们总是要配置一大堆的插件，这个时候，就是preset出马的时候了，那什么是preset呢？其实就是预置插件列表了，引入了一个preset就包含了一个系列的plugin
比如preset-react就包含了以下插件：
@babel/plugin-syntax-jsx
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-display-name
.babelrc配置preset-react
{
"presets": ["@babel/preset-react"]
}如果有配置项，就酱：
{
"presets": [
[
"@babel/preset-react",
{
"pragma": "dom", // default pragma is React.createElement
"pragmaFrag": "DomFrag", // default is React.Fragment
"throwIfNamespace": false // defaults to true
}
]
]
}babel和webpack
添加webpack.config.js
const path=requrie('path')
module.exports={
entry:path.resolve(__dirname, 'index.js'),
output:{
path: path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
}- 添加相关依赖
$ npm install --save-dev webpack webpack-cli babel-loader " - `webpack`：`webpack`核心库 - `webpack-cli`：`webpack`命令行工具 - `babel-loader`：`babel`的`webpack loader`
打包
$ npm webpack
查看编译结果
省略无关的东西，可以看到，箭头函数也被转化成了function
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("let add = function (num1, num2) {\n return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");
/***/ })
/******/ });支持es6
支持es6可以使用@babel/present-env来代替一系列的东西，还有许多的配置像，比如兼容的浏览器版本，具体可以看这里
安装依赖包
$ npm install --save-dev @babel/preset-env
配置
{
"plugins": ["@babel/present-env"]
}打包
$ npm webpack
查看效果
/***/ "./index.js":
/*!******************!*\
!*** ./index.js ***!
\******************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("let add = function (num1, num2) {\n return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");
/***/ })
/******/ });总结
这只是babel功能的一个小览，了解一下babel的基本使用和一些概念而已。
위 내용은 es6의 바벨 사용법 소개(코드 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
