hello-world

最新推荐文章于 2024-04-11 09:56:20 发布

Leon_Jinhai_Sun

最新推荐文章于 2024-04-11 09:56:20 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/103451023

版权

<!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 标签中的内容转换为浏览器可以识别的 JavaScript
    2. 使用 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 标签中的内容转换为浏览器可以识别的 JavaScript
	2. 使用 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/standalone

Hello 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>

Leon_Jinhai_Sun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hello-world

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>00-babel-standalone的作用.html</title></head><body><!-- @babel/stand...
复制链接

扫一扫