hello-world
生活随笔
收集整理的這篇文章主要介紹了
hello-world
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>00-babel-standalone的作用.html</title>
</head>
<body>
<!--@babel/standalone 的作用是可以在瀏覽器中調用 babel 的 API 完成 EcmaScript 6 - EcmaScript 5 的轉換@babel/standalone 是一個獨立的編譯工具，支持調用它的 API 完成 EcmaScript 6 到 EcmaScript 5 的轉換-->
<script src="node_modules/@babel/standalone/babel.js"></script>
<!-- <script>var input = 'const getMessage = () => "Hello World"; console.log(getMessage())';// 調用 Babel 提供的轉換 API 完成編譯轉換，得到結果字符串// 編譯過程比較耗時，所以只推薦開發測試使用// 咱們這里使用它的目的是為了簡化 react 的學習過程var output = Babel.transform(input, { presets: ['es2015'] }).code;window.eval(output)
</script> --><!--當 babel-standalone 發現 type="text/babel" 類型標簽的時候：1. 將 script 標簽中的內容轉換為瀏覽器可以識別的 JavaScript2. 使用 eval 執行編譯結果代碼-->
<script type="text/babel">const getMessage = () => "Hello World";console.log(getMessage())
</script>
</body>
</html>
babel-standalone
參考文檔：https://github.com/babel/babel/tree/master/packages/babel-standalone
自己手動調用 babel API 編譯執行：
<script>var input = 'const getMessage = () => "Hello World"; console.log(getMessage())';// 調用 Babel 提供的轉換 API 完成編譯轉換，得到結果字符串// 編譯過程比較耗時，所以只推薦開發測試使用// 咱們這里使用它的目的是為了簡化 react 的學習過程var output = Babel.transform(input, { presets: ['es2015'] }).code;// eval 函數支持動態解析執行 JavaScript 字符串window.eval(output) </script>babel 自動編譯執行：
<!-- 當 babel-standalone 發現 type="text/babel" 類型標簽的時候：1. 將 script 標簽中的內容轉換為瀏覽器可以識別的 JavaScript2. 使用 eval 執行編譯結果代碼 --> <script type="text/babel">const getMessage = () => "Hello World";console.log(getMessage()) </script>初始化及安裝依賴
$ mkdir react-demos $ cd react-demos $ npm init --yes $ npm install --save react react-dom @babel/standaloneHello World
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>01-hello-world.html</title> </head><body> <!-- 應用入口 --> <div id="app"> </div> <script src="node_modules/@babel/standalone/babel.js"></script> <script src="node_modules/react/umd/react.development.js"></script> <script src="node_modules/react-dom/umd/react-dom.development.js"></script> <!--React 的核心理念就是：組件化，不支持管理 DOM 模板，它必須把所有的模板都放到組件中--><script type="text/babel">// 下面這句話的作用就是將一個 h1 標簽渲染到指定的頁面入口中// 這種將 html 和 JavaScript 混寫的方式叫做 JSX 語法// 該語法必須通過 babel 編譯完瀏覽器才能執行ReactDOM.render(<h1>Hello, react!</h1>,document.getElementById('app')) </script> </body></html>?
?
?
總結
以上是生活随笔為你收集整理的hello-world的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React相关资源推荐
- 下一篇： jsx基本语法