reactJS - 03利用babel来”编译”我们的脚本文件_babel-plugin-transform-react-jsx-优快云博客

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/52026687

本文介绍如何通过Babel工具来编译React项目的步骤，包括初始化项目、安装必要的依赖包、配置编译规则以及修改HTML文件引用编译后的JS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步
在终端下进入项目根目录，执行 npm init，一路回车下去
然后发现项目目录下多了一个”package.json”文件

第二步
安装babel-cli

sudo npm install -g babel-cli

安装”编译”插件

sudo npm install babel-plugin-transform-react-jsx

完成上面，项目目录下会多如下目录和文件
这里写图片描述

第三步、执行编译
编译我们src目录下面的hello.js

babel --plugins transform-react-jsx src/hello.js --out-file build/hello.js

编译后的文件输出到build/hello.js

第四步、修改index.html

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>

    <!-- 不需要这个文件啦 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> -->

</head>
<body>
    <div id="demo"></div>

    <!-- 必须放在dom后面 -->
    <!-- 注意type是text/javascript啦 -->    
    <!-- 引入我们编译好的js -->
    <script type="text/javascript" src="build/hello.js"></script>
</body>
</html>