Bable的运用

2024年3月28日 239次阅读 来源: 小葱

一、bable简介

babel是一个东西链，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码。babel现在已支撑了最新版本的javascript语法，关于现在尚未被浏览器支撑的语法，能够经由过程babel插件支撑。

二、设置文件

Babel有两种并行的设置文件的体式格局，能够一同运用，也能够零丁运用。

  • 项目局限的设置

  • 文件相干设置

    • .babelrc（和.babelrc.js）文件
    • package.json中”babel”关键字的部份

1. 项目局限的设置

根目录建立 babel.config.js 文件。babel.config.js 的官方文档在这里 babel

2. 文件相干设置

1）.babelrc（和.babelrc.js）文件

在Babel实行编译的过程当中，会从项目的根目录下的 .babelrc文件中读取设置。.babelrc是一个json花样的文件。在.babelrc设置文件中，主如果对预设(presets) 和 插件(plugins) 举行设置。.babelrc设置文件平常为以下：

{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2",
     "react"
  ]
}

plugins该属性是通知babel要运用那些插件，这些插件能够掌握怎样转换代码。
presets属性通知Babel要转换的源码运用了哪些新的语法特征，presets是一组Plugins的鸠合。官方供应以下的划定规矩集，你能够根据需要装置。

# ES2015转码划定规矩
$ npm install --save-dev babel-preset-es2015

# react转码划定规矩
$ npm install --save-dev babel-preset-react

# ES7差别阶段语法提案的转码划定规矩（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
    原文作者：小葱
    原文地址: https://segmentfault.com/a/1190000018399353
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞