分享一种将NextJs和Koa2结合的全栈框架 |
您所在的位置：网站首页 › 全栈网站开发需要哪些软件 › 分享一种将NextJs和Koa2结合的全栈框架 |
分享一种将NextJs和Koa2结合的全栈框架
|
作者利用空余时间建了一个网站（xzgz.top），在开发的过程中需要同时管理前后端的项目，连调的时候需要频繁的切换项目，会让人很烦躁，稍微不注意就不知道自己在干什么了。。。对于独立的开发者来说同时维护前后端两个项目着实让人烦躁。 为了解决这个痛点（算作痛点吧）就想到将Nextjs和koa组合在一起，就能很方便的组合项目，使用一个项目管理，同时也不舍弃前后端分离的逻辑。下面详细的介绍一下这个框架，并且完成网站登录流程的前后端示例。 准备工作需要安装的包： nextjs styled-components mobx mobx-react-lite koa全家桶 mysql2 typescript webpack相关 安装使用yarn安装上述的包 yarn add next styled-components mobx mobx-react-lite koa koa-body koa-router koa-session mysql2因为现在全面拥抱Typescript，所以还得安装 yarn add -D typescript ts-loader webpack webpack-cli安装完成后创建server和client文件夹分别存放服务端代码和客户端代码。 开始先创建一个koa项目的入口文件server/index.ts，（在此之前需要在项目根目录下创建一个tsconfig.json，具体配置可以根据nextjs官方配置做参考。）创建一个基础的koa应用。 import koa from "koa"; import koaBody from "koa-body"; const server = new koa(); server.use(koaBody()); server.use(async (ctx) => { ctx.body = "success"; }); server.listen(6001, () => { console.log("Koa server 已启动:", "http://localhost:6001"); }); server.on("error", (e) => { console.log("Koa server 错误:", e); });node无法直接执行ts文件，尽管有ts-node这类的包可以直接运行，但是打包出来的项目路径映射会丢失（这个问题我也解决过可以查看文章：网站开发日志）。所以还是选择比较稳定的方法：webpack打包成JS运行。 创建 /** @type {import('webpack').Configuration} */ // Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require("path"); const isProduction = process.env.NODE_ENV == "production"; const config = { entry: path.resolve(__dirname, "./server/index.ts"), output: { path: path.resolve(__dirname, "./.server"), }, target: "node", devtool: "source-map", module: { rules: [ { test: /\.(ts|tsx)$/i, loader: "ts-loader", exclude: ["/node_modules/"], }, ], }, resolve: { extensions: [".tsx", ".ts", ".jsx", ".js", "..."], alias: { server: path.resolve(__dirname, "./server"), }, mainFields: ["main", "module", "browser"],// 变更webpack的文件查找顺序 }, externalsType: "commonjs", }; module.exports = () => { if (isProduction) { config.mode = "production"; } else { config.mode = "development"; } return config; };值得注意的是resolve.mainFields这个字段，默认情况下，Webpack 会按照以下顺序查找 main 字段： module jsnext:main browser main在这个基础项目中有一个第三方包使用了hexoid这个包，这个包里面有.mjs文件，所以直接运行会报错hexoid is not a function，所以改变一下变更webpack的文件引入优先级就可以避免这个错误。 运行npx webpack --config webpack.server.config.js && node .server/main.js，可以看到项目已经运行起来了。
现在先写一部分，可以收藏我的网站（xzgz.top）或者关注我已获取后续内容，完整版代码已上传到开源仓库。 目前这个框架被应用到xzgz.top网站。 期待你的关注。❤️ |
【本文地址】
今日新闻 |
推荐新闻 |