Babel的入門教程

Babel

概念

babel是JavaScript的編譯器，他主要的功能是將ES6之後的語法編譯成當前或者更舊的瀏覽器/環境可以運行的語法。

例子：

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

安裝

可以根據自己的需求，安裝相應的插件

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

npm install --save @babel/polyfill

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-typescript

npm install --save-dev @babel/preset-flow

使用

在根目錄下創建babel的配置文件，可以是babel.config.json或者是babel.config.js

babel.config.json

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

bable.config.js

const presets= [
    [
        "@babel/env",{
            targets:{
                edge:"17",
                firefox:"60",
                chrome:"67",
                safari:"11.1"
            },
            "useBuiltIns":"usage",
            "corejs":"3.6.5"
        }
    ]
];

module.exports={presets}

運行

單文件，在終端執行以下命令

npx babel index.js

執行結果如下：

--out-dir

表示編譯放置到文件夾裏

如果想把當前文件編譯結果，存到另外的文件夾裏，可執行如下命令：

npx babel src --out-dir lib

執行結果如下：

lib下的index文件就是編譯後的文件 。

--out-file

表示編譯到文件裏

-o

或者執行如下命令，只不過編譯出來的文件是txt格式。

npx babel src -o lib

執行結果如下：

--watch/-w

實時編譯的話，可以使用

npx babel index.js --watch --out-file script.js

--source-maps inline

表示編譯成一個源碼格式的

npx babel src --out-file babel-index.js --source-maps inline

瀏覽器環境

Babel也可以用於瀏覽器環境。但是，從Babel 6.0開始，不再直接提供瀏覽器版本，而是要用構建工具構建出來。如果你沒有或不想使用構建工具，可以使用@babel/standalone模塊或者babel-browser-king提供的瀏覽器版本，將其插入網頁

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
//或者
<script src="https://unpkg.com/[email protected]/babel-browser.min.js"></script>
<script type="text/babel">
    const arr=[1,2];//your codes
</script>

更多的例子，請查看我的倉庫，歡迎star👏

(完)