es6의 바벨 사용법 소개(코드 예시)

이 글은 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에 추가됩니다. 예외는 많지 않습니다. 감지한 다음 코드에 위 메서드를 도입하고 먼저 실행하면 이 메서드와 호환되지 않는 js 환경에서 언제든지 Array.protorype.includes 메서드를 직접 호출할 수 있습니다.

# 🎜🎜##🎜 🎜#

이것은 폴리필이지만 폴리필에는 한계가 있습니다. 기존 방법을 사용하여 구현할 수 있는 새로운 기능의 경우 폴리필을 사용할 수 있습니다. 예를 들어 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}

변환 결과를 파일로 저장하여 화살표 구문과 호환되지 않는 환경에서 사용하실 수 있습니다. 이 컴파일러를 브라우저에 내장하고 소스 코드를 컴파일한 다음 Function 생성자나 eval을 사용하여 이를 실행하여 새로운 구문을 구현할 수도 있습니다. 이 경우 런타임 컴파일러라고 부르지만 물론 일반적으로 그렇게 사용되지는 않습니다. 이것. .

Use babel

물론 이런 컴파일러를 직접 작성하는 것은 불가능하므로 그래도 프로젝트를 해야 합니까? 이때 우리가 의지할 수 있는 것은 바벨이 그런 것입니다. 다음으로 바벨을 사용해 화살표 함수를 파싱하겠습니다

프로젝트 초기화

$ mk babel-demo 
$ cd babel-demo
$ npm init -y

#🎜🎜 #Babel 설치: # 🎜🎜#참고: (babel7 이후의 Babel 관련 라이브러리는 기본적으로 @babel 네임스페이스에 위치합니다.)

$ 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

위 명령은 babel을 사용하여 index.js를 변환하고 그 결과를 Bundle.js에 넣는다는 의미입니다. 🎜#--plugins: 이 변환에 대한 플러그인 지원 추가

-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!