Babel7的安裝和配置方法

發(fā)布時間：2021-09-10 15:19:45 來源：億速云閱讀：165 作者：chen 欄目：大數(shù)據(jù)

這篇文章主要講解了“Babel7的安裝和配置方法”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Babel7的安裝和配置方法”吧！

從7版本，Babel的安裝和之前是有區(qū)別的，這在安裝的時候，要注意寫對包名。

7的安裝方式：

npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfill

之前的版本中，babel前邊沒有@符號。

上述命令是安裝的當前開發(fā)的工作空間，如需全局安裝，請把參數(shù)換成-g。

在工程的目錄下邊新建babel.config.js文件，當然新建6版本所使用的.babelrc文件也是能夠進行使用的。

babel.config.js文件內(nèi)容示例，targets是目標的瀏覽器版本，這個可以實際使用中進行修改。

const presets = [ [

"@babel/env",

{

targets: {

edge: "17",

firefox: "60",

chrome: "67",

safari: "11.1",

useBuiltIns: "usage",

}, ], ];

module.exports = { presets };

執(zhí)行轉(zhuǎn)換腳本的命令，針對文件夾的命令，也可以針對單個文件進行轉(zhuǎn)換。

./node_modules/.bin/babel src --out-dir lib

./node_modules/.bin/babel sample.js -o buildenv.js

可以在package.json中進行執(zhí)行腳本的配置：

Babel7的安裝和配置方法

7版本中，presets中沒有類似于es2015的設(shè)置了，在7版本中，應(yīng)該是設(shè)置@babel/preset-env，參加下列的英文說明：

@babel/preset-es2015@7.0.0-beta.53: ???? We've deprecated any official yearly presets in 6.x in favor or babel-preset-env. For 7.x i

t would be @babel/preset-env.

在JavaScript開發(fā)時，我們就能夠使用新的ECMAScirpt語法，之后使用Babel將代碼轉(zhuǎn)換成兼容瀏覽器的方式。

感謝各位的閱讀，以上就是“Babel7的安裝和配置方法”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Babel7的安裝和配置方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

猜你喜歡