Babel的使用

時間 2019-11-20

標籤 babel 使用简体版

原文原文鏈接

Babel的使用javascript

全局安裝$ npm install --global babel-cli
此時執行
發現並無對代碼進行編譯
按網上教程，本地安裝$ npm i babel-cli babel-preset-es2015 --save-dev
再在文件目錄下建立.babelrc文件，配置以下
```
{
	"presets": [
		"es2015"
	],
	"plugins": [
	]
}
```
執行 $ babel a.js -o aCopy.js後，成功轉換es6

`babel-register`的使用

下一個經常使用的運行 Babel 的方法是經過 babel-register。這種方法只須要引入文件就能夠運行 Babel，或許能更好地融入你的項目設置。但請注意這種方法並不適合正式產品環境使用。直接部署用此方式編譯的代碼不是好的作法。在部署以前預先編譯會更好。不過用在構建腳本或是其餘本地運行的腳本中是很是合適的
nodejs對es6的支持並很差，像class, import這些關鍵字，react的jsx都沒法使用。可是babel能夠將這些都轉化爲es5。
babel-register能夠理解成一個小插件，將es6的東西轉成es5
本地安裝 $ npm i babel-register --save-dev

建立文件test.js，註冊babel-register，而後引入文件便可

require('babel-register');
require('./a.js');  //引入須要編譯的模塊

而後執行node test.js代替node a.js便可

除此以外，它還能夠接收一個babel的配置做爲參數

require('babel-register')({
    'presets': ['es2015']
});
require('./a.js');  //引入須要編譯的模塊

Babel的配置文件.babelrccss

告訴babel應該怎麼作

有兩個參數

{
  "presets": [], //預設
  "plugins": [] //插件
}

咱們安裝babel-preset-es2015和babel-preset-react和babel-preset-stage-x（0~3）和babel-preset-env在預設裏面寫上
```
{
    "presets": [
        "es2015","react","stage-1","env"
    ],
    "plugins": [
    ]
}
```
plugins插件：常見的transform-runtime,babel-plugin-import
transform-runtime也是一個插件，它與polifill有些相似，polifill用於應用開發中。會添加相應變量到全局，因此會污染全局變量。但它不污染全局變量，因此常常用於框架開發

babel-plugin-import 是一款 babel 插件，它會在編譯過程當中將 import 的寫法自動轉換爲按需引入的方式

"plugins": [["transform-runtime"],["import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": true // `style: true` 會加載 less 文件 或者'css'
    }],["import", {
      "libraryName": "cheui-react",
      "libraryDirectory": "lib/components",
      "camel2DashComponentName": true // default: true
  }]]

babel-preset-stage-xhtml

是4 個不一樣階段的（打包的）預設
以上每種預設都依賴於緊隨的後期階段預設。例如，babel-preset-stage-1 依賴 babel-preset-stage-2，後者又依賴 babel-preset-stage-3。.
使用的時候只須要安裝你想要的階段就能夠了：$ npm install --save-dev babel-preset-stage-2java

babel-preset-envnode

它的功能相似於 babel-preset-latest，它會根據目標環境選擇不支持的新特性來轉譯。

babel-polyfill的使用react

做爲對一些babel沒法轉義的API的補充，例如Array.from(),async await等
安裝$ npm install --save babel-polyfill後
- 法3.1: (瀏覽器環境)單獨在html的<head>標籤中引入babel-polyfill.js(CDN或本地文件都可)
- 法3.2: 在package.json中添加babel-polyfill依賴, 在webpack配置文件增長入口: 如entry: ["babel-polyfill",'./src/app.js'], polyfill將會被打包進這個入口文件中, 並且是放在文件最開始的地方
- 法3.3: 在package.json中添加babel-polyfill依賴, 在webpack入口文件頂部使用import/require引入,如`import 'babel-polyfill'``