2023年11月第18页 - 第18页

Next.js 全栈开发微信公众号 Markdown 排版编辑器

sxkk20081年前 (2023-11-23)93

至此我们的编辑器已经完成。当然产品细节决定产品质量，码上掘金中的例子，还需要继续打磨优化样式，加入更多功能，才可以开发出一款比较完善的产品。

云函数开发接口

为了让数据保存到云端，我选择使用云函数来开发接口，使用云数据库来保存数据。至于为什么？主要是因为便宜。

目前腾讯云开发 19.9 一月，我这里选择使用

文章为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获授权禁止转载，侵权必究！阅读本文，你将收获：学会使用 Monaco Editor 开发多文件编辑器学会使用 mdx 在线编译了解了...

查看全文

创建 React 应用的 7 种方式，你用过几种？

sxkk20081年前 (2023-11-23)111

这样，您的第一个 umijs 项目就创建完成了，可以在浏览器中访问 http://localhost:8000 查看效果。

未命名4.png

一：Create-React-App首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)npx create-react-app my-app...

查看全文

ChatGPT 以及相关开源项目体验

sxkk20081年前 (2023-11-23)106

GitHub：

本月初，ChatGPT 以惊人的速度问世，在技术圈中引起了广泛讨论。在 GitHub 上近期还诞生了多个 ChatGPT 相关的开源项目，数量之多令人瞠目结舌，甚至 ChatGPT 独霸了大半个 Gi...

查看全文

使用 Vitest 和 React Testing Library 给 Next.js 应用单元测试

sxkk20081年前 (2023-11-23)91

highlight: monokai theme: vuepress文章为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获授权禁止转载，侵权必究！前言在前面的文章中我们使用了 Next...

查看全文

你好，Next.js 13

sxkk20081年前 (2023-11-23)121

这是启动后的界面，这个 demo 不是一个简单的页面，而是一个包含了深度嵌套路由的例子。

下图我开发时的截图，Turbopack 直接在命令行中打印出了构建时间，我们看到启动时间只需要 2.3ms

试着修改代码，程序会自动热更新，绝大多数次数更新时间都很快，但偶尔有几次更新时间却很长，图片中有一处需要 16s（我使用的是 Mac M1)，这其中的原因就不得而知了，尤大也发布了测评，使用 1000 个节点来对比更新速度，数据显示：根组件与 vite 时间几乎相同，叶子节点比 vite 快 68%，与官方称比 vite 快 10 倍相差甚远。当然目前 Turbopack 还处于 alpha 阶段，期待 Turbopack 能够尽快推出正式版。

Turbopack 特点

开箱即用 TypeScript, JSX, CSS, CSS Modules, WebAssembly 等
增量计算： Turbopack 是建立在 Turbo 之上的，Turbo 是基于 Rust 的开源、增量记忆化框架，除了可以缓存代码，还可以缓存函数运行结果。
懒编译：例如，如果访问 localhost:3000，它将仅打包 pages/index.jsx，以及导入的模块。

为什么不选择 Vite 和 Esbuild？

Vite 依赖于浏览器的原生 ES Modules 系统，不需要打包代码，这种方法只需要转换单个 JS 文件，响应更新很快，但是如果文件过多，这种方式会导致浏览器大量级联网络请求，会导致启动时间相对较慢。所以作者选择同 webpack 一样方式，打包，但是使用了 Turbo 构建引擎，一个增量记忆化框架，永远不会重复相同的工作。

Esbuild 是一个非常快速的打包工具，但它并没有做太多的缓存，也没有 HMR（热更新），所以在开发环境下不适用。

theme: vuepress highlight: monokai文章为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获授权禁止转载，侵权必究！前言上周发布了 Next.js 的一个...

查看全文