Node 20 + 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 模版”

          2. src/pages/home/index.js：首页

             import React from 'react'; //引入 react
             function Home() {
             	return (
             Hello, World!
             )
             }
             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();
             

          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
          # 安装   babel加载器   css加载器  style加载器   将CSS提取到单独的文件中                          
          npm i -D babel-loader css-loader style-loader mini-css-extract-plugin
          

          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: {
             		hot:true, // 热更新
             		open: true, // 编译结束后用浏览器打开
             		host: 'localhost', // 'local-ip',
             	},
             	plugins: [
             		new HtmlWebpackPlugin({
             			title: 'HTML页面标题', //替换index.html的title标签内容
             			template: resolve('public/index.html'), //html模版的位置
             		}),
             		new MiniCssExtractPlugin({
             			filename: 'css/[name].css',
             			chunkFilename: 'css/[id].css',
             			// 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:dev # 构建项目
             

          二、扩展项目支持的能力（待补充）

          返回目录

          1. JS 扩展（待补充）

          返回目录

          2. CSS 扩展（待补充）

          返回目录

          3. 热更新（待补充）

          返回目录

          4. 按需加载（待补充）

          返回目录

          5. 第三方库的使用（待补充）

          返回目录

          三、代码标准化（待补充）

          返回目录

          1. 代码校验 ESLint（待补充）

          返回目录

          四、代码发布（待补充）

          1. 生产环境 webpack 配置（待补充）

          返回目录