likes
comments
collection

一起学习搭建react+webpack+ts框架啊!!!(一)

作者站长头像
站长
· 阅读数 19

React项目框架搭建

相信我,小白一步一步来,也能学会搭框架,重点在于编程思想!!!

一起学习搭建react+webpack+ts框架啊!!!(一)

前言

起初,主要是想较为系统的学习下react,然后就开始断断续续搭建项目框架,过程持续的也比较久,算是一边学习一边实践,然后!!!过了一段时间发现之前学废了的知识点,又抛到脑后了,所以不得不整理下文档了。巨巨巨巨烦写文档!脑壳疼脑壳疼啊

前置项

react:react18 打包工具:webpack5 路由:react-router-dom@6.x UI:antd4.21.7 语言:typescript node: node14 axioseslintprettier代码规范配置

目前所用到的库都为当前最新版本


准备重新创建一个新项目一步步重新再次搭建并进行记录!!! 一起学习搭建react+webpack+ts框架啊!!!(一)

  1. 首先,初始化一个新项目(不采用脚手架啥的)
1.创建一个文件夹 react-demo
2.进行初始化
npm init / yarn init
一路点击回车,自动生成一个package.json文件

一步步试探,白着急哈,缺啥就补啥呗~

  1. 修改package.json
// scripts中添加本地运行命令
scripts: {
  "dev": "webpack"
}
// 执行npm命令运行项目
npm run dev

然后就会发现报错了,识别不了webpack

一起学习搭建react+webpack+ts框架啊!!!(一)

  1. 装webpack相关依赖

接下来,安装下webpack即可 注意:安装依赖时,区分下是devDependencies还是dependencie,保持良好的习惯

npm i webpack -D

继续运行,会报错并提示安装webpack-cli(这里图就不贴啦~)

接着运行,报从配置文件中未找到mode等属性,这时就需要在根目录下创建webpack.config.js开始进行配置啦

一起学习搭建react+webpack+ts框架啊!!!(一)

webpack.config.js基础配置

const path = require('path')
module.exports = {
    mode: "development", // 默认开发环境
    entry: path.resolve(__dirname, './src/index.tsx'), // 入口文件\
    // 打包出口文件
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].[contenthash:8].bundle.js',
        // webpack5支持clean属性配置 不需要再去依赖其他plugin配置
        clean: true, // 清除掉之前的bundle 
    }
}

简单配置一下入口文件index.tsx及出口目录dist即可,运行npm run dev就可以打包了

一起学习搭建react+webpack+ts框架啊!!!(一)

思考一下,怎么才能在浏览器内显示出内容呢?我们是不是要先有一个html文件,然后如果把写的所有代码都挂载到这个html上,这样是不是就满足需求了呀

所有的代码不就是打包后生成的dist/js/下的文件嘛,那我们直接把这个文件通过script标签引入到html文件不就行了吗

// index.tsx
console.log('react项目框架搭建')

// public/index.html
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='../dist/js/main.f8fffaee.bundle.js'></script>
</head>

浏览器打开html文件,运行成功

一起学习搭建react+webpack+ts框架啊!!!(一)

再接再厉!我们不想每次都要手动去引入bundle.js,想要它能正常在本地跑起来并且能将生成的包自动挂载html上!!!那就需要配置些与webpack-dev-server相关的

  • 先稍微改下package.json中的scripts
"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  • 然后就直接运行npm run dev,按照之前的思路跟着报错信息走,安装webpack-dev-server
npm i webpack-dev-server -D
  • npm run dev就能正常跑起来了 默认的端口号是8080
devServer: {
    port: 9090, // 这里端口号可自行定义 默认8080
    hot: true // 本地开发热更新 代码更改后自动重新编译
}
  • 跑是跑起来了,但是啥也看不到啊,接下来就要搞点内容显示了~
    • 创建一个html文件 这里我在根目录下创建了一个public目录,public下创建index.html
    <body>
        <!-- 用于挂载内容 -->
        <div id="app"></div>
    </body>
    
    • webpack配置,将bundle.js自动挂载到html文件,这就需要安装HtmlWebpackPlugin
    npm i html-webpack-plugin -D
    // webpack.config.js
    
    • webpack.config.js
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        plugins: [
            // 将bundle.js自动挂载到index.html
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, './public/index.html'), // 要挂载的模板文件
                filename: 'index.html',
            })
        ]
    }
    
    • 接着直接本地运行,打印语句正常输出,说明配置正常,可以自动将bundle.js挂载到html上了(404错误不为理会,只是没有提供ico图标而已~)

      一起学习搭建react+webpack+ts框架啊!!!(一)

  1. 接下来 要考虑ts的相关配置了 一起学习搭建react+webpack+ts框架啊!!!(一) 随便写一个ts的语法,就会发现报错,原因是未安装typescript,且未提供对应的loader去处理此类型文件
npm i typescript -D
npm i ts-loader -D // 后续会换成功能更强的babel去做解析处理

然后配置下.tsx的解析规则,让它使用ts-loader去处理

// webpack.config.js
module: {
  rules: [
      {
          test: /\.(tsx?|js)$/,
          use: 'ts-loader',
          include: /src/, 
      }
  ]
},

继续运行,提示需创建tsconfig.json文件

一起学习搭建react+webpack+ts框架啊!!!(一) 根据提示在根目录下创建tsconfig.json

{
    "compilerOptions": {
        "jsx": "react", // 在.tsx文件中支持jsx
        "target": "es6",
        "rootDir": "./src",
        "outDir": "./dist",
        "module": "ESNext",
        "sourceMap": true,
        "strictNullChecks": true,
        "declaration": true, // 生成相应的.d.ts文件
        "allowJs": true,
        "checkJs": true,
        "moduleResolution": "Node", // 将模块解析模式设置为node.js解析模式
        "allowSyntheticDefaultImports": true // 允许对不包含默认导出的模块使用默认导出
    },
    "include": ["./src/**/*"],
    // 不进行类型检查的文件
    "exclude": ["node_modules", "dist"]
}

这样,就能正常解析ts文件啦~

  1. 接下来就进行react相关配置

    • 安装react相关
    npm i -D react react-dom @types/react @types/react-dom
    

    安装完之后,修改下入口文件index.tsx测试下~

    import { createRoot } from 'react-dom/client'
    import * as React from 'react'
    
    const container = document.getElementById('app')
    const root = createRoot(container as Element)
    
    root.render(
        <div>欢迎来到react!</div>
    )
    

    效果如下:

    一起学习搭建react+webpack+ts框架啊!!!(一)

  2. 配置css样式相关

    // webpack.config.js
    rules: [
        {
            test: /\.css$/,
            include: [/node_modules/],
            // css-loader对css文件进行合并处理等 
            // style-loader用于处理的css文件以style标签的形式嵌入到html页面中
            use: ['style-loader', 'css-loader'],
        },
    ]
    

    如果我们采用style-loader将样式直接嵌入到html中,如果存在大量的css文件,这种方式就会导致html页面特别臃肿也会比较杂乱,也不易于生产环境调试等

    可以采用MiniCssExtractPlugin插件,拆分css并以外联的方式将css文件引入到html中(本地环境用style-loader也可),本身这只是一个优化项~

    // 安装MiniCssExtractPlugin插件
    // webpack.config.js改一下loader即可
    {
        test: /\.css$/,
        include: [/node_modules/],
        // css-loader对css文件进行合并处理等 
        // style-loader用于处理的css文件以style标签的形式嵌入到html页面中
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
    }
    // 同时在plugin中添加MiniCssExtractPlugin配置
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].css', // filename打包的是同步代码
            chunkFilename: '[id].css', // 异步代码
        }),
    ],
    // 不使用style-loader的话,可以顺手uninstall一下
    

    创建一个global.css 测试下~

    一起学习搭建react+webpack+ts框架啊!!!(一)

待续~

  • 完成以上步骤,一个小的react项目框架就搭建完成了
  • 后续会进行css模块化、react-router、antd、axios二次封装、以及eslint、prettier代码规范配置等

相关链接: 一起学习搭建react+webpack+ts框架啊!!!(二) github代码地址