React+Nodejs中间层（一）:环境搭建+实现接口转发

Koa+React+Webpack环境配置

1. 初衷

最近，因疫情在家写了一些东西．想到之前去实习的时候，公司用的Nodejs做中间层，实现数据格式的处理，请求转发，SSR等功能，想自己也折腾下这么个东西，刚好最近或多或少的学了一些Webpack，就从webpack搭一个Koa作为中间层，页面路由，同时使用React的这么一个脚手架吧，只是一个自己的玩具吧，哈哈哈哈．

2. 使用中间层的作用

我理解的几个nodejs的作用

• 整合后端接口和接口转发：比如一个功能需要多个不同的接口，可以先把请求打到Node层，通过Node层去访问多个Java接口，之后将多个接口数据进行拼接即可．
• 解决跨域问题：如果直接使用浏览器发起http请求到后端，会存在跨域问题，使用nodejs获取数据，可以绕过跨域问题(本文进行实践)
• 利于SEO：利用Node层实现模板渲染功能，有利于SEO(第二部分进行实践)

3. 搭建Koa2+React+Webpack开发环境

看了网上一些文章，其实自己对于中间层有点迷糊，这里的想法是利用Koa的模板渲染功能，在渲染的时候加载打包的React页面的js文件，通过打包的js文件实现模板渲染react页面(但是不知道这个是怎么实现SSR的)，请教网上各位大佬，谢谢大家了.

因此上述项目的本质上还是一个koa的项目,使用koa2的脚手架搭建一个koa2的后端环境.

1. 项目目录

1. 创建一个build文件夹,在下面创建一个webpack.config.dev.js用于配置webpack的打包配置
2. 创建一个client文件夹,下面主要存放页面
3. routes主要用于koa的路由,api接口和页面的渲染功能
4. views主要是渲染页面的模板
5. public中的javascript主要用于存放打包的页面js,这个publick页面是koa中配置的静态路径的根目录,之后通过页面加载的静态资源文件(打包完毕的js文件都放在这里,之后网页加载的时候通过静态资源进行加载)

2. Webpack环境配置

1. 依赖安装

• babal相关
  • babel-loader
  • babel-polyfill
  • @babel/core
  • @babel/plugin-transform-runtime
  • @babel/preset-env
  • @babel/preset-react
  • @babel/runtime
  • @babel/runtime-corejs3
• 其他loader
  • css-loader
  • style-loader
  • file-loader
  • url-loader
• 其他插件
  • html-webpack-plugin
  • clean-webpack-plugin

2. babel和loader的常规配置

module: {
   
    rules: [
        {
   
            test: /\.jsx?/,
            loader: "babel-loader",
            options: {
   
                presets: ["@babel/preset-env", "@babel/preset-react"],
                plugins: [
                    [
                        "@babel/plugin-transform-runtime",
                        {
   
                            corejs: 3
                        }
                    ]
                ]
            },
            exclude: /node_modules/
        },
        {
   
            test: /\.css/,
            loader: ["style-loader", "css-loader"],
            exclude: /node_modules/
        },
        {
   
            test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2|ico)$/,
            use: [
                {
   
                    loader: "url-loader",
                    options: {
   
                        limit: 10240, //
                        esModule: false
                    }
                }
            ],
            exclude: /node_modules/
        }
    ]
},

注意的点: css-loader和style-loader的顺序，执行的时候是倒序出栈执行的，所以要反着配置

3. 多页面配置

配置考虑如下问题

• 应该每个页面是多入口的情况，如果要配置多个入口
• 多个入口的文件会引用共有库，例如React，所以在打包的时候应该优化，分离打包公用包
• 使用html-webpack-plugin生成模板页面，通过koa中的ctx.render方法进行渲染，因此需要配置多生成html文件，仅加载该文件中用到的打包的js文件

4. 公共包Chunk的打包过程:

这里的name，指定了打包得到的公共包的chunkName这里的vendor,之后在配置html-webpack-plugin的时候按照chunkName进行打包的时候可以配置为vendor

optimization: {
   
    splitChunks: {
   
        cacheGroups: {
   
            commons: {
   
                name: "vendor",
                chunks: "all"
            }
        }
    }
}

5. 多文件入口和html-webpack-plugin配置

这里就是将client下面的目录文件夹配置成对应的页面入口,动态加载多页面和打包html的配置

const fs = require("fs");

const getEntryDir = () => {
   
    const dir = fs.readdirSync(path.resolve(__dirname, "../client/"));

    let entry = {
   };
    let webpackPlugins = [];

    dir.forEach(item =>