01月
03

发表于 • 字数统计 2202 • 被 10 人看爆

##2024/9/12 15:32:31:
#react

从零开始创建工程，babel 编译 jsx

工程目录结构

.
├── .babelrc
├── dist
│   └── test.js
├── package-lock.json
├── package.json
└── src
    └── test.jsx

初始化一个 js 项目

生成 package.json

mkdir jsx-project
cd jsx-project
npm init -y

创建 jsx 源文件

mkdir src
cd src
touch test.jsx

test.jsx的内容：

import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

安装开发依赖 babel

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

Babel 配置

shell 中将指定的 Babel 配置写入 .babelrc 文件

cd jsx-project
echo '{ "presets": ["@babel/preset-env", "@babel/preset-react"] }' > .babelrc

这条命令使用 echo 将 JSON 格式的配置内容输出，并通过 > 操作符将其重定向到 .babelrc 文件中。如果 .babelrc 文件已经存在，这个命令会覆盖原有的内容。如果你希望追加内容而不是覆盖，可以使用 >> 操作符。

jsx 源代码：

import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

使用 babel 进行编译

src 表示源代码目录，--out-dir dist 表示输出目录

npx babel src --out-dir dist

编译后的结果 在 dist/test.js

"use strict";

var _react = _interopRequireDefault(require("react"));
var _client = _interopRequireDefault(require("react-dom/client"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var myElement = /*#__PURE__*/_react["default"].createElement("h1", null, "I Love JSX!");
var root = _client["default"].createRoot(document.getElementById('root'));
root.render(myElement);

代码解释

var _react = _interopRequireDefault(require("react"));
var _client = _interopRequireDefault(require("react-dom/client"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

_interopRequireDefault 这是什么意思？
_interopRequireDefault 是一个通用的辅助函数，用于处理模块导入。它的作用是判断导入的模块是否是一个ES模块（ES module），如果是，则直接返回该模块；如果不是，则将模块包装在一个对象中，并添加一个名为"default"的属性，属性值为导入的模块。
在这段代码中，_interopRequireDefault 函数被用于处理模块导入的结果。它的作用是确保无论模块是ES模块还是CommonJS模块，最终都能以一致的方式访问到导入的模块。

在这个特定的代码片段中，_interopRequireDefault 函数被用来处理从 "react" 和 "react-dom/client" 模块导入的结果，以确保可以正确地使用这些模块。

完整代码在：https://github.com/qyzhizi/js-logical/tree/main/jsx-project

分享到：