实践 | react17+ts4+webpack5

参考案例

前端技术栈：React + react-router + axios + Typescript + Recoil + Hooks + Cssnext
后端技术栈： BFF + Node + Koa + Serverless + 函数计算 + OSS
细节相关：

• 微信扫码
• markdown 渲染
• 防爬虫
• pdf渲染

项目搭建

mkdir hooome
cd hooome
yarn init -y

1. 项目入口

入口文件src/index.html
技巧：src/index-dev.html直接引入react避免本地对react的打包 <script src="localhost:js/react.js"></script>

// src/index-prod.html
<div id="app"></div>

2. scripty快捷shell命令

命令优化， 代替 npx webpack serve --mode=development ./config/webpack.base.js
执行 yarn clint:dev，按照script/clint/dev 路径寻找文件。其他环境执行类似。

// scripts/client/dev.sh
webpack serve --mode development

error: because it was not readable/executable
解决： chmod -R 766 scripts

3. webpack5配置

具体配置项， 参见webpack5官方文档

⚠️ 默认执行根目录 webpack.config.js 文件
其他配置文件：

• .babelrc
• postcss.config.js
• tsconfig.json (tsc —init)

4. label -> react + ts

// rules
{
    test: /\.(js|jsx|ts|tsx)/,
    include: [resolve('src')],
    exclude: /node_modules/,
    loader: "babel-loader"
},
// .babelrc
{
    "presets": [
        [
            "@babel/preset-env"
        ],
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

5. postcss

⚠️ loader的顺序为自右向左

// rules
{
    test: /\.(.css|scss)$/,
    use: cssLoders
},
const cssLoders = [
    MiniCssExtractPlugin.loader,
    {
        loader: "css-loader",
        options: {
            importLoders: 1 // 指定是否需要第三方解析
        }
    },
    {
        loader: "postcss-loader",
    }
]; 
// postcss.config.js
module.exports = {
    plugins: {
        "post-css-preset-env": {
            stage: 0,
            feature: {
                "nestting-rules": true
            }
        }
    }
}

业务实现

路由

recoil数据管理

公共组件

公共函数

接口对接

antd

swiper

打包发布

附件

插件版本

yarn add webpack webpack-cli webpack-dev-server -D
├─ webpack-cli@4.7.2
├─ webpack-dev-server@3.11.2
└─ webpack@5.40.0
yarn add webpack-merge -D //合并
└─ webpack-merge@5.8.0
yarn add scripty -D
└─ scripty@2.0.0
yarn add yargs-parser -D // 解析参数
└─ yargs-parser@20.2.9
yarn add html-webpack-plugin -D
└─ html-webpack-plugin@5.3.2
yarn add clean-webpack-plugin -D
└─ clean-webpack-plugin@4.0.0-alpha.0
yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader
├─ @babel/core@7.14.6
├─ @babel/preset-env@7.14.7
├─ @babel/preset-react@7.14.5
└─ babel-loader@8.2.2
yarn add postcss-loader postcss-preset-env css-loader mini-css-extract-plugin -D 
├─ css-loader@5.2.6
├─ mini-css-extract-plugin@1.6.1
├─ postcss-loader@6.1.0
└─ postcss-preset-env@6.7.0
yarn add optimize-css-assets-webpack-plugin -D
└─ optimize-css-assets-webpack-plugin@6.0.1
yarn add typescript
└─ typescript@4.3.4
yarn add @babel/preset-typescript -D
└─ @babel/preset-typescript@7.14.5
yarn add react react-dom react-router-dom 
└─ react@17.0.2
├─ react-dom@17.0.2
└─ react-router-dom@5.2.0
yarn add @types/react @types/react-dom @types/react-router-dom -D
├─ @types/react-dom@17.0.8
└─ @types/react-router-dom@5.1.7
yarn add recoil axios 
├─ axios@0.21.1
└─ recoil@0.3.1
yarn add qs
└─ qs@6.10.1
yarn add swiper
└─ swiper@6.7.5

参考：

基于webpack5起步教程， 有略微差异https://www.youtube.com/watch?v=X1nxTjVDYdQ