vue中babel指的是什么意思

這篇文章將為大家詳細(xì)講解有關(guān)vue中babel指的是什么意思，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

在vue中，Babel是一個(gè)JavaScript編譯器，主要用于將采用ECMAScript 2015+語(yǔ)法編寫的代碼轉(zhuǎn)換為向后兼容的JavaScript語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vue項(xiàng)目中普遍使用es6語(yǔ)法，但有時(shí)我們的項(xiàng)目需要兼容低版本瀏覽器，這時(shí)就需要引入babel插件，將es6轉(zhuǎn)成es5。下面我們來(lái)了解一下babel是什么。

Babel 是一個(gè) JavaScript 編譯器

Babel 是一個(gè)工具鏈，主要用于將采用 ECMAScript 2015+ 語(yǔ)法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。下面列出的是 Babel 能為你做的事情：

• 語(yǔ)法轉(zhuǎn)換

• 通過(guò) Polyfill 方式在目標(biāo)環(huán)境中添加缺失的特性 （通過(guò)引入第三方 polyfill 模塊，例如 core-js）

• 源碼轉(zhuǎn)換（codemods）

// Babel 輸入： ES2015 箭頭函數(shù)
[1, 2, 3].map(n => n + 1);

// Babel 輸出： ES5 語(yǔ)法實(shí)現(xiàn)的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

vue中引入babel步驟

1、安裝babel-polyfill插件

npm install --save-dev babel-polyfill

2、安裝成功后有三種引入方式

第一種：在入口文件中引入，例如：main.js中加入

import 'babel-polyfill'

第二種：在 webpack.config.js 文件中，entry 入口處，按照如下修改

第三種：使用cdn的資源，以js的文件加入到html頁(yè)面：例如：

說(shuō)明：

babel插件雖然可以幫我們把es6語(yǔ)法的寫法轉(zhuǎn)成es5的寫法，但是卻不能轉(zhuǎn)換新的API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局對(duì)象都不會(huì)轉(zhuǎn)換，如果想讓這個(gè)方法運(yùn)行，必須使用babel-polyfill，為當(dāng)前環(huán)境提供一個(gè)墊片。

安裝命令如下。

然后，在腳本頭部，加入如下一行代碼。

關(guān)于“vue中babel指的是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。