快捷導(dǎo)航

ES6代碼轉(zhuǎn)ES5詳細(xì)教程(babel安裝使用教程)

更新時(shí)間：2023年01月16日 09:48:49 作者：slongzhang_

Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下

需要用到的軟件

Node.js + babel

Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行。這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。下面是一個(gè)例子。

// 轉(zhuǎn)碼前
input.map(item => item + 1);

// 轉(zhuǎn)碼后
input.map(function (item) {
  return item + 1;
});

進(jìn)入正題，安裝babel(安裝之前請(qǐng)確保你已安裝了node.js)

babel建議在項(xiàng)目中安裝，不建議全局安裝；
選擇項(xiàng)目目錄或新建一個(gè)目錄，如E:/wwwroot/babel_test

在這里插入圖片描述

安裝命令：

npm install --save-dev @babel/core

Babel 的配置文件是.babelrc，存放在項(xiàng)目的根目錄下。使用 Babel 的第一步，就是配置這個(gè)文件。
該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本格式如下。

{
  "presets": [],
  "plugins": []
}

presets字段設(shè)定轉(zhuǎn)碼規(guī)則，官方提供以下的規(guī)則集，你可以根據(jù)需要安裝。

# 最新轉(zhuǎn)碼規(guī)則
$ npm install --save-dev @babel/preset-env

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

然后，將這些規(guī)則加入.babelrc。

 {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

注意，以下所有 Babel 工具和模塊的使用，都必須先寫好.babelrc。

命令行轉(zhuǎn)碼

Babel 提供命令行工具@babel/cli，用于命令行轉(zhuǎn)碼。

它的安裝命令如下。

npm install --save-dev @babel/cli

基本用法如下。

# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ npx babel example.js

# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# --out-file 或 -o 參數(shù)指定輸出文件
 npx babel example.js --out-file compiled.js
# 或者
 npx babel example.js -o compiled.js

# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
 npx babel 源目錄 --out-dir 轉(zhuǎn)后目錄
# 或者
 npx babel 源目錄 -d 轉(zhuǎn)后目錄

# -s 參數(shù)生成source map文件
 npx babel 源目錄 -d 轉(zhuǎn)后目錄 -s

如果覺得麻煩還可以通過網(wǎng)上在線轉(zhuǎn)換1 ，在線轉(zhuǎn)換2

到此這篇關(guān)于ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程)的文章就介紹到這了,更多相關(guān)ES6代碼轉(zhuǎn)ES5內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: