ES6代碼轉ES5詳細教程(babel安裝使用教程)

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

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

需要用到的軟件

Node.js + babel

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

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

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

進入正題，安裝babel(安裝之前請確保你已安裝了node.js)

babel建議在項目中安裝，不建議全局安裝；
選擇項目目錄或新建一個目錄，如E:/wwwroot/babel_test

在這里插入圖片描述

安裝命令：

npm install --save-dev @babel/core

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

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

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

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

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

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

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

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

命令行轉碼

Babel 提供命令行工具@babel/cli，用于命令行轉碼。

它的安裝命令如下。

npm install --save-dev @babel/cli

基本用法如下。

# 轉碼結果輸出到標準輸出
$ npx babel example.js

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

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

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

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

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

您可能感興趣的文章: