JavaScript 是依據 ECMAScript (ES) 定義的標準，大家比較常見的就是 ECMAScript 5 (ES5) 和 ECMAScript 6 (ES6)，目前最新的是 ECMAScript 2024。還是有一些舊版的瀏覽器只支援 ES5 等舊版的 JavaScript 語法，如果我們使用新的 JavaScript 語法，在不支援新語法的瀏覽器中就會無法執行、出現錯誤。
瀏覽器只能看得懂 JavaScript ，平時我們寫 TypeScript 時需要先將 TypeScript 編譯(transpile)為 JavaScript 後才能讓瀏覽器看得懂、可以執行。
而 Babel 可以非常簡單的幫我們把 JavaScript ，甚至是 TypeScript 自動轉換為舊版相容的 JavaScript ，讓我們可以不需要經過複雜的步驟，直接用最新的語法撰寫程式碼。
最簡單的方式就是使用 CDN 引用 babel 套件，並且設定 script type 為 text/babel 即可，以下是最簡單的示範，讓瀏覽器直接處理 TypeScript 語法：
使用上面的程式碼會出現以下警告：
原因是因為每次在執行時都會透過 Babel 即時轉換語法，在要發佈到正式環境中建議預先編譯 (precompile) 程式碼，這樣就只要轉換一次，其他使用者在瀏覽時就不需要再轉換了。
參考資料：
github - babel/babel
babel.dev
瀏覽器只能看得懂 JavaScript ，平時我們寫 TypeScript 時需要先將 TypeScript 編譯(transpile)為 JavaScript 後才能讓瀏覽器看得懂、可以執行。
而 Babel 可以非常簡單的幫我們把 JavaScript ，甚至是 TypeScript 自動轉換為舊版相容的 JavaScript ，讓我們可以不需要經過複雜的步驟，直接用最新的語法撰寫程式碼。
最簡單的方式就是使用 CDN 引用 babel 套件，並且設定 script type 為 text/babel 即可，以下是最簡單的示範，讓瀏覽器直接處理 TypeScript 語法：
<!doctype html>
<html lang="en">
<head>
<title></title>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
interface User {
name: string;
}
const user: User = {
name: 'bob',
};
console.log(user);
</script>
</head>
<body>
</body>
</html>
使用上面的程式碼會出現以下警告：
transformScriptTags.ts:253 You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/
原因是因為每次在執行時都會透過 Babel 即時轉換語法，在要發佈到正式環境中建議預先編譯 (precompile) 程式碼，這樣就只要轉換一次，其他使用者在瀏覽時就不需要再轉換了。
參考資料：
github - babel/babel
babel.dev
感謝教學~
回覆刪除