本文章來源於：https://blog.csdn.net/weixin_41046961/article/details/87908962
前言
之前一直想要系統的學習一下Babel的使用規則，看過阮一峰老師的《Babel基礎入門》，無奈此教程是2016年出的，而Babel 7都已經出來啦，於是，在搜集了各種資料后，關於如何快速上手Babel，我大概精簡了以下步驟，如有錯誤，希望大家能指出來，謝謝！
使用指南
1.使用手冊——Babel官網（最好看着官網提示的步驟一點一點來）
2.配置環境——創建項目文件babel-demo，進入項目后 git bash，然后輸入 npm init -y，然后項目文件就會出現配置文件：package.json
3.下載相應的包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
或者簡寫：
npm install -D @babel/core @babel/cli @babel/preset-env
npm install @babel/polyfill
（--save-dev(簡寫-D）表示該版本只適用於開發環境中，命令會自動幫你寫在package.json的devDependencies中
--save（或者不寫）則表示該版本適用於生產環境中，命令會自動幫你寫在package.json的dependencies中 ）
注釋：先解釋一下使用Babel前要下載的包的意義和用法
如下。
1). @babel/cli是一個允許你從終端使用 babel 的工具。即用於命令行轉碼
基本用法如下。
# 轉碼結果輸出到標准輸出
$ babel example.js
# 轉碼結果寫入一個文件
# --out-file 或 -o 參數指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整個目錄轉碼
# --out-dir 或 -d 參數指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 參數生成source map文件
$ babel src -d lib -s
2). Babel 的核心功能在 @babel/core模塊，如果某些代碼需要調用Babel的API進行轉碼，則就需要此模塊。
用法如下
var babel = require('@babel/core');
// 字符串轉碼
babel.transform('code();', options);
// => { code, map, ast }
// 文件轉碼（異步）
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});
// 文件轉碼（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }
// Babel AST轉碼
babel.transformFromAst(ast, code, options);
// => { code, map, ast }
例子如下。
在src目錄文件新建一個core.js文件，輸入如下
var es6Code = 'let x = n => n + 1';
var envCode = require('@babel/core')
.transform(es6Code, {
presets: ["@babel/env"]
})
.code;
console.log(envCode);
之后在bash中輸入
$ npx babel src -d dist
//npx如果不懂請自行上網搜尋
編譯成功，你會在目錄里看到dist，里面有已經編譯好的core.js文件，如下
"use strict";
var es6Code = 'let x = n => n + 1';
var envCode = require('@babel/core').transform(es6Code, {
presets: ["@babel/env"]
}).code;
console.log(envCode);
如果想看envCode的結果，也可以在bash中輸入
$ node src/core.js
3). @babel/polyfill 模塊包括core-js和自定義regenerator runtime 來模擬完整的 ES2015+ 環境。
Babel默認只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign）都不會轉碼。
舉例來說，ES6在Array對象上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill，為當前環境提供一個墊片。
4). @babel/preset-env 根據你需要支持的環境（配合targets中的瀏覽器信息）自動決定適合你的 Babel 插件
4.使用以下內容在項目的根目錄中創建名為 babel.config.js 的配置文件：(配置文件很重要）
module.exports = function(api){
api.cache(true)
const presets = [
["@babel/env", {
targets: {
ie:"10",
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
useBuiltIns: "usage"
}]
];
const plugins = [];
return {
presets,
plugins
}
}
//target表示你想要支持的瀏覽器的最低型號
// useBuiltIns: "usage" ——由於polyfill包很臃腫，Babel 的此設置將檢查你的所有代碼，以查找目標環境中缺少的功能，並僅包含所需的 polyfill。
5.開始使用！！ 創建src文件夾，再在里面創建index.js文件，並輸入
(x => x * 2)(1)
並在bash里繼續輸出入
$ npx babel src -d dist
//npx如果不懂請自行上網搜尋
如果覺得每次都要輸入 npx babel src -d dist 太長，也可以 改寫package.json文件，
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:auto":"npx babel src -d dist"
},
之后只需要在bash中輸入
$ npm run build:auto
結果如下，順利編譯成功了
"use strict";
(function (x) {
return x * 2;
})(1);
6.配置的其他方法
以上方法是用了babel.config.js來配置Babel
即
babel.config.js
babel.config.js在項目的根目錄中創建一個使用以下內容調用的文件。
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
查看babel.config.js文檔以查看更多配置選項。
官網還有幾種方法來配置
I. .babelrc
{
"presets": [...],
"plugins": [...]
}
.babelrc在項目中創建一個使用以下內容調用的文件。
II. package.json
或者，您可以選擇使用密鑰.babelrc從內部指定配置，如下所示：package.json babel
{
"name": "my-package",
"version": "1.0.0",
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
III. .babelrc.js
配置.babelrc與之相同，但您可以使用JavaScript編寫它。
const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };
你可以訪問任何Node.js API，例如基於流程環境的動態配置 ：
const presets = [ ... ];
const plugins = [ ... ];
if (process.env["ENV"] === "prod") {
plugins.push(...);
}
module.exports = { presets, plugins };
IV. 使用CLI（@babel/cli）
這里如果你明確知道自己需要的插件，如箭頭函數，那么可以在bash先下載
npm install --save-dev @babel/plugin-transform-arrow-functions
然后接着輸入
babel --plugins @babel/plugin-transform-arrow-functions src -d dist
即可
V. 使用API（@babel/core）
require("@babel/core").transform("code", {
plugins: ["@babel/plugin-transform-arrow-functions"]
});
好的，大概就是這樣啦，如果有任何問題可以在評論區指出，謝謝大家！
————————————————
版權聲明：本文為CSDN博主「理智lili」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_41046961/article/details/87908962