babel-standalone 是一個可以在瀏覽器端運行babel 編譯的工具，同時官方也說明了一些使用場景（需要進行實時編譯的）
使用
使用比較簡單，就是添加依賴
- 參考
<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>
支持import 以及export 的hack 模式
因為babel 主要是編譯，所以requie 以及exports 是不支持的，會提示undefined，解決方法，就是hack 的模式
- 參考demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>babel learning</title>
</head>
<body>
<div id="output"></div>
<script src="https://unpkg.com/core-js-bundle@3.8.2/index.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script>
const content = {
userapp:`
export default {
name:"dalong",
age:333
}
`,
userapp2:`
export default {
name:"dalong",
age:333,
type:"v1"
}
`,
platform:`
import app from 'userapp';
import app2 from 'userapp2';
JSON.stringify({app,app2})
`
}
// hack for exports && require
window.exports = window;
window.require=function require (module) {
var output = Babel.transform(content[module], { presets: ['env'] }).code;
console.log(output);
return eval(output)
}
const getMessage = () => require("platform")
var getMessage2 = function() {
return window.require("platform")
}
document.getElementById('output').innerHTML = getMessage2();
</script>
</body>
</html>
- 代碼說明
一以上基於了json 對象存儲了需要的es6 模塊，platform 作為入口，依賴了其他兩個模塊userapp，userapp2
通過import 模式引入了userapp，userapp2,同時通過JSON 反序列化輸出，為了方便使用，自己包裝了exports
以及require的hack，exports比較簡單，直接導出就可以了，require 處集成了babel 的編譯能力（注意很簡單
沒有進行cache，實際最好進行cache，可以減少編譯時間），代碼部分使用了eval 進行執行（會有安全風險） - 運行效果
說明
基於babel 的瀏覽器能力，我們可以自己搞一個web es6 運行環境