React 18 + Babel 7 + Webpack 5 开发环境搭建


文章目录

  • 一、基础开发环境搭建
    • 1. 新建项目目录
    • 2. 项目目录结构及内容
    • 3. 安装 React 18 + Babel 7 + Webpack 5
    • 4. 配置 Babel 和 Webpack
    • 5. 调试/构建项目
  • 二、扩展项目支持的能力(待补充)
    • 1. JS 扩展(待补充)
    • 2. CSS 扩展(待补充)
    • 3. 热更新(待补充)
    • 4. 按需加载(待补充)
    • 5. 第三方库的使用(待补充)
  • 三、代码标准化(待补充)
    • 1. 代码校验 ESLint(待补充)
  • 四、代码发布(待补充)
    • 1. 生产环境 webpack 配置(待补充)

一、基础开发环境搭建

1. 新建项目目录

返回目录

mkdir example #创建项目目录
cd example #进入项目目录
npm init -y #生成 package.jsom

2. 项目目录结构及内容

返回目录

example # 项目目录
├── public # 静态公用目录
│   └── index.html # html模板
├── src # 源代码目录
│   ├── pages # 页面目录
│   │   └── home # 主页目录
│   │       └── index.js # 主页代码
│   └── index.js # React 入口代码
└── package.json
  1. public/index.html:html 模版”
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="utf-8" /><!-- 移动端全屏 --><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" /><meta name="theme-color" content="#000000" /><!-- 防止页面缓存 --><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires" content="0"><!-- 页面标题 html-webpack-plugin 插件替换 --><title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body><!-- React根节点 --><div id="root"></div>
    </body>
    </html>
    
  2. src/pages/home/index.js:首页
    import React from 'react'; //引入 reactfunction Home() {return (<div>Hello, World!</div>)
    }export default Home;
    
  3. src/index.js:React 的入口文件
    'use strict';
    import React from 'react'; //引入 react
    import { createRoot } from 'react-dom/client';
    import Home from '../src/pages/home'; //引入本项目的首页//把首页渲染到 html 模版的 react 根节点上
    const domNode = document.getElementById('root');
    const root = createRoot(domNode);
    root.render(<Home />);
    

3. 安装 React 18 + Babel 7 + Webpack 5

返回目录

# 安装 React主程序  dom操作    路由
npm i -S react react-dom react-router-dom# 安装babel
npm i -D @babel/core @babel/preset-env @babel/preset-react# 安装 webpack主程序  支持命令行 本地开发用web服务 处理html插件
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin# 安装 webpack加载器
$ npm i -D babel-loader css-loader style-loader

4. 配置 Babel 和 Webpack

返回目录

  1. 更新项目目录l
    example # 项目目录
    ├── public # 静态公用目录
    │   └── index.html # html模板
    ├── src # 源代码目录
    │   ├── pages # 页面目录
    │   │   └── home # 主页目录
    │   │       └── index.js # 主页代码
    │   └── index.js # React 入口代码
    ├── .babelrc # babel配置文件               新增
    ├── webpack # webpack配置目录              新增
    │   └── dev.js # 开发环境配置文件           新增
    └── package.json
    
  2. 新建文件 .babelrc
    {"plugins": ["@babel/syntax-dynamic-import"],"presets": [["@babel/preset-env",{"modules": false}],"@babel/preset-react"]
    }
  3. 新建 webpack/dev.js:开发环境配置文件
    // 引用库
    const path = require('path');
    const webpack = require('webpack');// 引入插件
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');// 路径方法
    const resolve = pathname => path.resolve(__dirname, `../${pathname}`);
    const stylesHandler = MiniCssExtractPlugin.loader;module.exports = {mode: 'development',entry: resolve('src/index.js'),output: {clean: true,filename: 'js/[name].[hash:5].bundle.js', //出口文件path: resolve('dist') //输出路径},devServer: {open: true,host: 'localhost',},plugins: [new HtmlWebpackPlugin({title: 'HTML页面标题', //替换index.html的title标签内容template: resolve('public/index.html'), //html模版的位置}),new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:5].css',chunkFilename: 'css/[id].[contenthash:5]\'.css',ignoreOrder: false}),],module: {rules: [{test: /\.(js|jsx)$/i,loader: 'babel-loader',},{test: /\.css$/i,use: [stylesHandler, 'css-loader'],},{test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,type: 'asset',},],},
    };
    

    注意loader 的加载顺序是从右往左从下往上

5. 调试/构建项目

返回目录

  1. 修改 package.jsom,在 “scripts” 下添加运行和构建命令
    {"scripts": {"dev": "webpack serve -c webpack/dev.js","build:dev": "webpack -c webpack/dev.js"}
    }
    
  2. 用 npm 执行脚本命令
    npm run dev   # 调试项目
    npm run build # 构建项目
    

二、扩展项目支持的能力(待补充)

返回目录

1. JS 扩展(待补充)

返回目录

2. CSS 扩展(待补充)

返回目录

3. 热更新(待补充)

返回目录

4. 按需加载(待补充)

返回目录

5. 第三方库的使用(待补充)

返回目录

三、代码标准化(待补充)

返回目录

1. 代码校验 ESLint(待补充)

返回目录

四、代码发布(待补充)

1. 生产环境 webpack 配置(待补充)

返回目录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/46435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EasyCVR视频技术:城市电力抢险的“千里眼”,助力抢险可视化

随着城市化进程的加速和电力需求的不断增长&#xff0c;电力系统的稳定运行对于城市的正常运转至关重要。然而&#xff0c;自然灾害、设备故障等因素常常导致电力中断&#xff0c;给城市居民的生活和企业的生产带来严重影响。在这种情况下&#xff0c;快速、高效的电力抢险工作…

产品介绍|九芯语音芯片的特点与应用市场

随着物联网与智能家居的普及&#xff0c;越来越多的电子产品有了语音播报的需求。九芯语音芯片集成了语音识别和语音合成技术&#xff0c;能够准确地捕捉并解析人类的语言&#xff0c;同时以清晰、自然的语调进行回应&#xff0c;为各类智能设备注入了强大的语言交互能力。 特点…

Knife4j的原理及应用详解(四)

本系列文章简介&#xff1a; 在当今快速发展的软件开发领域&#xff0c;API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;作为不同软件应用之间通信的桥梁&#xff0c;其重要性日益凸显。随着微服务架构的兴起&#xff0c;API的数量…

2024智慧竞技游戏俱乐部线下面临倒闭?

在2024年的中国&#xff0c;智慧竞技游戏俱乐部如雨后春笋般在二三线城市中兴起&#xff0c;它们不仅是年轻人娱乐的场所&#xff0c;更是智慧与技巧的较量场。然而&#xff0c;随着疫情的冲击&#xff0c;这些俱乐部面临着前所未有的挑战。本文将通过一个小镇上的故事&#xf…

OSI 七层模型与五层模型

OSI&#xff08;开放系统互连&#xff09;七层模型和五层模型是描述计算机网络协议的两种不同层次划分方法。两者用于帮助理解和设计网络协议&#xff0c;但它们在层次划分上有所不同。

使用Elasticsearch Python SDK 查询Easysearch

随着数据分析需求的不断增长&#xff0c;能够高效地查询和分析大数据集变得越来越重要。Elasticsearch作为一种强大的分布式搜索和分析引擎&#xff0c;被广泛应用于各种场景。Easyearch 支持原生 Elasticsearch 的 DSL 查询语法&#xff0c;确保原业务代码无需调整即可无缝迁移…

优化校园设施维护,故障类型功能全解析

在智慧校园的日常运作中&#xff0c;报修管理系统的故障类型功能扮演着至关重要的角色。它不仅简化了设备维修的流程&#xff0c;还极大地提升了校园设施的维护效率。该功能的核心在于&#xff0c;它允许系统管理员创建、编辑和删除一系列故障类型&#xff0c;涵盖从网络连接问…

vue实现动态图片(gif)

目录 1. 背景 2. 分析 3. 代码实现 1. 背景 最近在项目中发现一个有意思的小需求&#xff0c;鼠标移入一个盒子里&#xff0c;然后盒子里的图就开始动起来&#xff0c;就像一个gif一样&#xff0c;然后鼠标移出&#xff0c;再按照原来的变化变回去&#xff0c;就像变形金刚…

QT--控件篇二

一、文本框 1. QLineEdit 文本框通常使用QLineEdit和QTextEdit这两个类来实现。 QLineEdit&#xff1a;用于单行文本输入。QTextEdit&#xff1a;用于多行文本输入&#xff0c;可以包含丰富的文本格式。 用setText(QString txt);设置默认的显示内容&#xff0c;用QString tex…

【NOI】C++数据结构入门之一维数组(一)数组基础

文章目录 前言一、概念1.导入2.数组2.1 数组的创建2.2 数组的使用 二、例题讲解问题&#xff1a;1423 - 考试成绩的简单统计问题&#xff1a;1153 - 查找“支撑数”问题&#xff1a;1156 - 排除异形基因问题&#xff1a;1155 - 找找谁的身高超过全家的平均身高问题&#xff1a;…

计算机网络生成树协议介绍与实践

生成树协议 1.环路 二层环路&#xff1a;数据链路层&#xff0c;交换机&#xff08;二层设备&#xff09;通过线路连接环状。即物理成环并且没有开启防环协议。 危害&#xff1a;广播风暴&#xff1a;交换机将未知帧广播&#xff0c;收到后的交换机继续广播&#xff0c;不断…

JAVA-----BIO、NIO、AIO

一、基础知识 1、同步与异步 同步&#xff1a; 同步就是发起一个调用后&#xff0c;被调用者未处理完请求之前&#xff0c;调用不返回。 异步&#xff1a; 异步就是发起一个调用后&#xff0c;立刻得到被调用者的回应表示已接收到请求&#xff0c;但是被调用者并没有返回结果…

全国地级市-产业升级、高级化、合理化数据集(1999-2022年)

数据年份&#xff1a;1999-2022年 数据范围&#xff1a;地级市以上城市 数据来源&#xff1a;中国城市统计NJ 数据整理&#xff1a;内含原始版本、线性插值版本、ARIMA填补版本 数据说明&#xff1a;参考干春晖&#xff08;2011&#xff09;《经济研究》的文章 &#xff0c…

数据结构(单链表(1))

前言 线性表中有着许多的结构&#xff0c;如顺序表和链表。而单链表则是链表的最基础的一种形式&#xff0c;下面就让我们对其做一个了解。 概念 概念&#xff1a;链表是⼀种物理存储结构上⾮连续、⾮顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次…

如何评价一个AI系统

构建输入的prompt和golden answer相对比较耗时(可以利用LLM完成设计),往往在完成Golden Answer的设计后很少需要再次设计,因此这个成本的投入是固定的。但是评估方法是每次评估都需要执行的事情,因此建立快速、边界、ROI高的评估方法是相对比较重要的部分。那么评估方法有…

ENSP中VLAN的设置

VLAN的详细介绍 VLAN&#xff08;Virtual Local Area Network&#xff09;即虚拟局域网&#xff0c;是一种将一个物理的局域网在逻辑上划分成多个广播域的技术。 以下是关于 VLAN 的一些详细介绍&#xff1a; 一、基本概念 1. 作用&#xff1a; - 隔离广播域&#xff1a…

Notebook 在复现数据科学研究成果中的丝滑使用

对于数据科学和 AI 科研人员而言&#xff0c;研究成果的复现至关重要。成果复现既是一种研究算法的方式&#xff0c;也有助于科研人员找到研究的新途径。 IDP 中提供自研 notebook 交互式编程环境&#xff0c;它非常适合做数据分析与代码展示&#xff0c;主要功能包括&#xf…

java基础概念01-注释、关键字、字面量、变量

一、注释 注释内容不会参与编译和运行&#xff0c;仅仅是对代码的解释说明。 1-1、注释的三种类型 1、单行注释&#xff1a;//…… // 这是单行注释 2、多行注释&#xff1a;/*…….*/ /* 这是一个 多行注释 */ 3、文档注释 特殊的多行注释&#xff0c;以/**开头&#xf…

【初阶数据结构】理解堆的特性与应用:深入探索完全二叉树的独特魅力

初阶数据结构相关知识点可以通过点击以下链接进行学习一起加油&#xff01;时间与空间复杂度的深度剖析深入解析顺序表:探索底层逻辑深入解析单链表:探索底层逻辑深入解析带头双向循环链表:探索底层逻辑深入解析栈:探索底层逻辑深入解析队列:探索底层逻辑深入解析循环队列:探索…

Spring源码(四) Aware 接口

Aware 接口&#xff1a; Aware 接口 表示bean可以通过回调方法从Spring容器接收特定框架对象的通知。 public interface Aware {}Spring提供了大量以 Aware 命名的接口&#xff0c;如BeanNameAware、BeanFactoryAware、ApplicationContextAware等。 这些接口定义了回调方法&…