专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

建立你自己的react(零)----环境搭建

ins518 2024-10-07 13:21:51 技术文章 12 ℃ 0 评论

前言

我们要自己手动实现react，那么得搭建一个环境，有人说了，为什么我们还要搭建环境呢，就不能写在一个index.js文件，然后index.html里面引入么。答案是残酷的，是不行的。

为什么不行呢？为什么需要引入编译工具呢？

首先来说jsx语法，这个大家都应该熟悉，每个类或者函数最后都return的jsx语法，然后需要把jsx转化为React.createElement(虚拟dom)的形式

而支持转化jsx语法的目前只有@babel/preset-react,这个东西第一你可以在node环境里直接import使用，而如果是浏览器环境，那么你的通过webpack或者vite才行，这里我们使用的webpack，通过编译的方式

如果有人问我为什么使用webpack而不是vite的话，那我的回答是，我更熟悉webpack，哈哈

准备环境

1. 准备npm包

@babel/core // babel核心包
@babel/preset-react //支持jsx语法
@babel/preset-env // 支持最新的js语法
babel-loader // 把es6转化为es5
webpack // 这个大家都认识
webpack-cli // 可以在命令行运行webpack
webpack-dev-server // webpack服务器
html-webpack-plugin //生成html并自动引入打包文件的插件
clean-webpack-plugin //每次打包清除旧的dist里面的文件

这里有个疑问哈，babel-loader和@babel/preset-env等有什么关联呢？

  • babel-loader其实就是允许在webpack里面使用babel去转换代码
  • @babel/preset-env和@babel/preset-react其实就是都要转化哪些代码 @babel/preset-react从名字就可以看出来是转化react代码的，也就是jsx代码 @babel/preset-env其实就是转化最新的js语法的，把他们转化为目标浏览器可以识别的代码

然后开始安装

pnpm i @babel/core @babel/preset-react @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin

2. 创建webpack.config.js

配置webpack.config.js,这个配置工作其实不难，很多都是语义化的东西

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    mode: "development",
    // 入口
    entry: path.join(__dirname, "/src/index.js"),
    // 出口
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.[hash:8].js",
    },
    module: {
        rules: [
            {
            // 对以js结尾的文件进行es6转es5
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets:["@babel/preset-env", "@babel/preset-react"]
                    }
                },
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        // html生成插件
        new HtmlWebpackPlugin({
           // 生成html参考的模板
            template: "./src/index.html",
        }),
    ],
    // 服务器
    devServer: {
        static: path.join(__dirname, "/dist"),
        open: true,
    },
};

3.创建html模版

src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

4. 设置启动命令

使用webpack-dev-server可以使我们支持热更新,还可以配置服务

 "scripts": {
    "start": "webpack-dev-server --config webpack.config.js"
  }

5。创建index.js

src/index.js

react源码内容

总结

以上就是我们搭建react源码环境, 整体看上去没啥难度，接下来就是开始实现react源码了，这才是重头戏


文章转自：https://juejin.cn/post/7372031054818607123

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表