Bable的使用

Sanchi 發(fā)布于2019-08-23 15:40 / 1917人閱讀

摘要：二配置文件有兩種并行的配置文件的方式，可以一起使用，也可以多帶帶使用。屬性告訴要轉(zhuǎn)換的源碼使用了哪些新的語(yǔ)法特性，是一組的集合。轉(zhuǎn)碼規(guī)則轉(zhuǎn)碼規(guī)則不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則共有個(gè)階段，選裝一個(gè)

一、bable簡(jiǎn)介

babel是一個(gè)工具鏈，用于將ES6+語(yǔ)法轉(zhuǎn)換為當(dāng)前版本瀏覽器等環(huán)境兼容的javascript代碼。babel目前已經(jīng)支持了最新版本的javascript語(yǔ)法，對(duì)于目前尚未被瀏覽器支持的語(yǔ)法，可以通過(guò)babel插件支持。

二、配置文件

Babel有兩種并行的配置文件的方式，可以一起使用，也可以多帶帶使用。

項(xiàng)目范圍的配置

文件相關(guān)配置

.babelrc（和.babelrc.js）文件

package.json中"babel"關(guān)鍵字的部分

1. 項(xiàng)目范圍的配置

根目錄創(chuàng)建 babel.config.js 文件。babel.config.js 的官方文檔在這里 babel

2. 文件相關(guān)配置 1）.babelrc（和.babelrc.js）文件

在Babel執(zhí)行編譯的過(guò)程中，會(huì)從項(xiàng)目的根目錄下的 .babelrc文件中讀取配置。.babelrc是一個(gè)json格式的文件。在.babelrc配置文件中，主要是對(duì)預(yù)設(shè)(presets) 和插件(plugins) 進(jìn)行配置。.babelrc配置文件一般為如下：

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

plugins該屬性是告訴babel要使用那些插件，這些插件可以控制如何轉(zhuǎn)換代碼。
presets屬性告訴Babel要轉(zhuǎn)換的源碼使用了哪些新的語(yǔ)法特性，presets是一組Plugins的集合。官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。

# ES2015轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-es2015

# react轉(zhuǎn)碼規(guī)則
$ npm install --save-dev babel-preset-react

# ES7不同階段語(yǔ)法提案的轉(zhuǎn)碼規(guī)則（共有4個(gè)階段），選裝一個(gè)
$ 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