用babel编译器😱 玩 JSX 和 ES6 | 不能再切图和crud了👊前言在 React 中 , 我们经常在

前言

在 React 中 , 我们经常在 html 里面写 js , 即 JSX 语法
相比于 ES5 , 我们更喜欢 ES6 的优雅 , 因为实在让人神清气爽 !

我们这些代码 ,最终还是要在浏览器中运行 , 可是古老的浏览器不认识 JSX , 也不认识什么 ES6 .

那怎么办 ?

这时候 Babel 就在那个时候 , 一脚把 ES6 踹到大家心坎上 , 同时带动了前端后几年的繁荣发展 !

于是 ,我们今天来搞一搞 ~ , 看看它的神采 !

什么是 Babel

我觉得这个问题 , 应该让官方文档回答🤡

我来总结一下 :

是一个工具链
可以将 ES5+ 代码在古老版本运行(向后兼容)

玩转 Bable

环境配置

首先使用初始化，建立 package.json 配置文件

npm init -y

添加依赖？

在 package.json 文件中添加 Babel 相关的开发时依赖。

通常需要添加 @babel/core、babel/cli 和 @babel/preset-env 等模块。可以使用以下命令进行安装：

你可以使用以下命令

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

安装完成后，在 package.json 文件的 devDependencies 部分会看到相应的依赖项。

也可以在 package.json 中添加开发依赖 , 并且控制主版本号 !

npm i

“@babel/core” 是核心转义逻辑，例如可以将 “const” 转换为 “var”。
“babel/cli” 是命令行工具，可以使用 “npx babel src -d lib” 这样的命令。
“@babel/preset-env” 用于预处理，配置转义规则。在 “.babelrc” 文件中，可以使用这些工具和预设将新的 ES6 + 语法进行转换。

如何配置 Babel ?

文档如是说到！

由于我们是临时起意，仅用于实现编译 ES6 和 JSX 所以使用.babelrc

我们可以在项目根目录下创建这个文件，并进行如下配置：

这个配置定义预设规则

@babel/preset-env , 用于将新版本的 JavaScript 代码转换为旧版本的 JavaScript 代码，以便在不同的环境中运行
@babel/preset-react,用于处理 React 项目中的 JavaScript 代码。

有了上面的配置，我们便可以把 ES6 , JSX 转换

更多的预设规则可以参考官网： www.babeljs.cn/docs/preset…

玩 ES6 和 JSX

配置 Babel 环境后我们先玩 ES6 , 在玩 JSX

ES6

我们新建 demo.js , 写 ES6 中的 const , 然后 npx babel demo.js -o demo-compile.js

npx 的使用场景非常广泛。比如当我们在别人的电脑上运行代码时，可能不想或者不方便安装所有的依赖包，这时就可以使用 npx 直接执行相应的命令。另外，在非技术人员的电脑上临时使用某些工具时，使用 npx 执行命令，装完之后不会留下痕迹，不会对系统造成额外的影响。

实际上，npx 会找到 node_modules/.bin/babel 命令并运行，所以 npx babel xxx.js -o xxx.js 和直接执行 node_modules/.bin/babel xxx.js -o xxx.js 的运行效果是一致的。这是因为 npm 在安装包时，会将可以执行命令的文件放在 node_modules/.bin 目录下。

// es6 
const a = 1;

编译出 demo-compile.js 文件 , 下面便是 Babel 编译后的代码

"use strict";

// es6 
var a = 1;

JSX

JSX 是 React 中用于描述 UI 界面的一种语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的结构，使得代码更加直观和易于理解。例如：

const element = <h1>Hello, world!</h1>;

然而，浏览器并不能直接理解 JSX 语法，我们使用 bable其转换为原生的 JavaScript 代码才能执行。实际上，上面的 JSX 代码会被转换为类似下面的 JavaScript 代码：

const element = React.createElement('h1', null, 'Hello, world!');

同样，这个转换过程也依赖于 Babel 工具。

我们做个小 demo , 在 JSX.js 里面写

// 原生不支持jsx 语法
const a = <div>hello, world</div>

const  b = <div className="hello">hello, world</div>


const c = <div className="hello"><span>hello, world</span></div>

运行npx babel JSX.js -o JSX-compile.js 得到以下代码 :

React 用虚拟 DOM 高效更新真实 DOM，React.createElement 是创建虚拟 DOM 元素的核心方法。编译后使用它，能让 React 处理 JSX 定义的元素。

use strict：开启严格模式，让代码遵循更严格规范，提升代码质量与安全性。
#PURE：是给代码压缩工具的提示，标记为纯函数调用，便于进行**死代码消除优化(**永远不会被执行的部分进行清理和优化)。
React.createElement 参数：
- 第一个：指定元素类型，如 "div" 或自定义组件。
- 第二个：元素属性对象，无属性则传 null。
- 后续：元素的子元素，可嵌套使用 React.createElement 创建复杂结构。

总结为这样的形式 React.createElement(tag,props,...child) , child 指的是嵌套的子元素 , 比如上面代码

const c = <div className="hello"><span>hello, world</span></div>编译如下:

我们再来看看 React 中使用 JSX , 我们也会引入 Babel , 我引入当目录下的 babel 和 React 核心库

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JSX</title>
    <script src="./js/babel.min.js"></script>
    <script src="./js/react.development.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- text/babel  -->
    <script type="text/babel">
      const myTitle = <h1>hello , babel</h1>
      console.log(myTitle)
    </script>
  </body>
</html>

用babel编译器😱 玩 JSX 和 ES6 | 不能再切图和crud了👊

前言