rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
162 lines (111 loc) • 12.2 kB
Markdown
---
title: 近期更新：支持 Windows、初步提供部署功能
slug: release-windows-deploy
---
:::note 重点
1. 支持 Windows 平台
2. 初步提供开箱即用的部署功能
:::
## 支持 Windows 平台
在本次更新中，支持在 Windows 平台开发和使用 Modern.js。
其中，Unbundled 模式暂不支持在 Windows 平台使用，支持即将上线。
### 示例：应用（MWA）工程
在 Windows 平台上，可使用 `npx @modern-js/create` 创建应用项目：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/create-mwa-windows.mp4" type="video/mp4"></video>
在项目目录执行 `pnpm run dev` 命令可进行项目开发和调试：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/mwa-dev-windows.mp4" type="video/mp4" ></video>
在项目目录执行 `pnpm run build` 命令可进行项目打包：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/mwa-build-windows.mp4" type="video/mp4" ></video>
在项目目录执行 `pnpm run new` 命令可开启项目扩展功能，如开启 BFF：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/mwa-new-windows.mp4" type="video/mp4" ></video>
在项目目录执行 `pnpm run test` 命令，可运行单元测试和集成测试：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/mwa-test-windows.mp4" type="video/mp4" ></video>
### 示例：Monorepo 工程
在 Windows 平台上，可使用 `npx @modern-js/create` 创建项目组：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/create-monorepo-windows.mp4" type="video/mp4" ></video>
在项目组中执行 `pnpm run new` 可创建子项目，例如创建模块子项目：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/monorepo-create-module-windows.mp4" type="video/mp4" ></video>
在模块子项目目录执行 `pnpm run new` 可开启模块扩展功能，例如 Storybook：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/monorepo-module-storybook-windows.mp4" type="video/mp4" ></video>
另外，Modern.js 官网上，针对 Windows 和 macOS 上不同的命令，将会使用以下形式展示：
## 初步提供开箱即用的部署功能
本次更新中，Modern.js 提供了部署相关的支持，包括：
1. 使用[内置的产品级 Web 服务器](https://modernjs.dev/docs/guides/features/server-side/deploy/modern-server/web-server)。
2. 提供 [CDN 上传能力](https://modernjs.dev/docs/guides/features/server-side/deploy/upload-cdn/oss)，将资源文件上传到阿里云 OSS 或腾讯云 COS 中。
3. 用[第三方的静态 Web 服务器（包括 CDN）](https://modernjs.dev/docs/guides/features/server-side/deploy/static-hosting)来托管应用产物。
使用 Modern.js 生成器开启对应功能后，只需要简单配置云平台所需的基本信息（例如 SecretID，SecretKey，BuekctName 等）就可以直接部署到云平台。
在应用根目录下创建 .env 文件，或发布平台（例如 Github CI）中配置那些无需保密的信息，例如：
```text
# 阿里云账号 ID（腾讯云无需该配置）
CLOUD_ACCOUNT_ID
# Bucket 名称
CLOUD_BUCKET_NAME
# 云平台部署区域
CLOUD_REGION
```
而与账号鉴权相关的信息务必在平台上配置，例如：
```text
# 云平台 AccessKey
CLOUD_SECRET_ID
# 云平台 Secret Key
CLOUD_SECRET_KEY
```
### 示例
在项目中执行 `pnpm run new` 启用部署功能：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/enable-deploy.mp4" type="video/mp4" ></video>
使用阿里云 FC + 部署应用：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/deploy-aliyun.mp4" type="video/mp4" ></video>
> [了解更多](https://modernjs.dev/docs/guides/features/server-side/deploy/modern-server/use-lambda/aliyun-fc)
使用腾讯云 SCF + COS 部署应用：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/deploy-tencent.mp4" type="video/mp4" ></video>
> [了解更多](https://modernjs.dev/docs/guides/features/server-side/deploy/modern-server/use-lambda/tencent-scf)
使用静态 Web 服务器托管产物：
<video controls width="100%" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/media/deploy-static.mp4" type="video/mp4" ></video>
> [了解更多](https://modernjs.dev/docs/guides/features/server-side/deploy/static-hosting)
目前暂不支持不同云平台间产品混合使用。另外，Monorepo 部署支持将在后续上线，敬请期待。更多内容可以前往官网了解。
## Changelog
- 生成器模板更新 [#176](https://github.com/modern-js-dev/modern.js/pull/176) [#177](https://github.com/modern-js-dev/modern.js/pull/177) [#183](https://github.com/modern-js-dev/modern.js/pull/183) [#190](https://github.com/modern-js-dev/modern.js/pull/190) [#185](https://github.com/modern-js-dev/modern.js/pull/185) [#260](https://github.com/modern-js-dev/modern.js/pull/260) [#259](https://github.com/modern-js-dev/modern.js/pull/259) [#285](https://github.com/modern-js-dev/modern.js/pull/285) [#300](https://github.com/modern-js-dev/modern.js/pull/300)
- 修复初始化项目 lint 报错 [#194](https://github.com/modern-js-dev/modern.js/pull/194) [#258](https://github.com/modern-js-dev/modern.js/pull/258)
- 应用项目启用 Electron 功能后增加提示信息 [#181](https://github.com/modern-js-dev/modern.js/pull/181)
- 模块工程方案调整清除 dist 目录时机 [#202](https://github.com/modern-js-dev/modern.js/pull/202)
- 一体化调用生成代码函数增加 requireResolve 参数 [#201](https://github.com/modern-js-dev/modern.js/pull/201)
- 修复模块工程方案项目初始化未生成 .npmignore[ #209](https://github.com/modern-js-dev/modern.js/pull/209) / [#198](https://github.com/modern-js-dev/modern.js/issues/198)
- 修复 MWA 项目在 Node.js 17 环境 dev 命令报错 [#214](https://github.com/modern-js-dev/modern.js/pull/214)
- 优化 node-bundler-require 的 external 正则匹配规则 [#218](https://github.com/modern-js-dev/modern.js/pull/218) [#275](https://github.com/modern-js-dev/modern.js/pull/275)
- 修复 babel 配置版本号 [#246](https://github.com/modern-js-dev/modern.js/pull/246)
- test 命令支持匹配 Windows 平台文件路径 [#247](https://github.com/modern-js-dev/modern.js/pull/247)
- 修复 unbundle 模式测试报错 [#226](https://github.com/modern-js-dev/modern.js/pull/226) / [#224](https://github.com/modern-js-dev/modern.js/issues/224) [#225](https://github.com/modern-js-dev/modern.js/issues/225)
- 修复 path 路径引用问题 [#253](https://github.com/modern-js-dev/modern.js/pull/253)
- Windows 平台支持 [#249](https://github.com/modern-js-dev/modern.js/pull/249) [#263](https://github.com/modern-js-dev/modern.js/pull/263) [#268](https://github.com/modern-js-dev/modern.js/pull/268) [#270](https://github.com/modern-js-dev/modern.js/pull/270) [#273](https://github.com/modern-js-dev/modern.js/pull/273) [#276](https://github.com/modern-js-dev/modern.js/pull/276) [#219](https://github.com/modern-js-dev/modern.js/pull/219) [#286](https://github.com/modern-js-dev/modern.js/pull/286) [#290](https://github.com/modern-js-dev/modern.js/pull/290) / [#180](https://github.com/modern-js-dev/modern.js/issues/180) [#182](https://github.com/modern-js-dev/modern.js/issues/182) [#236](https://github.com/modern-js-dev/modern.js/issues/236)
- Storybook 使用 esbuild 生成预览文件 [#254](https://github.com/modern-js-dev/modern.js/pull/254) / [#228](https://github.com/modern-js-dev/modern.js/issues/228)
- 修复使用 declare class 时 babel 编译报错 [#245](https://github.com/modern-js-dev/modern.js/pull/245)
- 修复启用功能安装依赖版本号 [#267](https://github.com/modern-js-dev/modern.js/pull/267)
- 修复 unbundled 模式在 js 项目报错 [#262](https://github.com/modern-js-dev/modern.js/pull/262) / [#262](https://github.com/modern-js-dev/modern.js/issues/262)
- Egg 和 Koa 请求返回类型改为 JSON [#266](https://github.com/modern-js-dev/modern.js/pull/266)
- new 命令支持启用 SSG [#265](https://github.com/modern-js-dev/modern.js/pull/265) [#299](https://github.com/modern-js-dev/modern.js/pull/299) / [#298](https://github.com/modern-js-dev/modern.js/issues/298)
- 修复 unbundled 模式不支持使用 BFF [#271](https://github.com/modern-js-dev/modern.js/pull/271) [#](https://github.com/modern-js-dev/modern.js/pull/269)[269](https://github.com/modern-js-dev/modern.js/pull/269) / [#235](https://github.com/modern-js-dev/modern.js/issues/235) [#257](https://github.com/modern-js-dev/modern.js/issues/257)
- Egg 框架 body 解析配置 [#272](https://github.com/modern-js-dev/modern.js/pull/272)
- 优化 unbundled 热更新提示 [#264](https://github.com/modern-js-dev/modern.js/pull/264) / [#186](https://github.com/modern-js-dev/modern.js/issues/186)
- 移除无用的中间件 [#239](https://github.com/modern-js-dev/modern.js/pull/239)
- 移除 useHeaders API [#279](https://github.com/modern-js-dev/modern.js/pull/279)
- 支持 SSG 配置 [#207](https://github.com/modern-js-dev/modern.js/pull/207)
- 修复 HTML 模板 [#277](https://github.com/modern-js-dev/modern.js/pull/277)
- 调整 webpack peerDependence 依赖 [#293](https://github.com/modern-js-dev/modern.js/pull/293)
- 修改初始化项目默认分支 [#306](https://github.com/modern-js-dev/modern.js/pull/306) [#23](https://github.com/modern-js-dev/codesmith/pull/23)
- 使用 Egg 框架时，根据项目代码；生成类型文件 [#284](https://github.com/modern-js-dev/modern.js/pull/284)
- 将底层插件实现改为基于 Farrow [#305](https://github.com/modern-js-dev/modern.js/pull/305)
- 修复 Storybook 路径问题 [#308](https://github.com/modern-js-dev/modern.js/pull/308) / [#291](https://github.com/modern-js-dev/modern.js/issues/291)
- 修复模块工程方案 new 命令报错问题 [#316](https://github.com/modern-js-dev/modern.js/pull/316) / [#314](https://github.com/modern-js-dev/modern.js/issues/314)
- 修复 Tailwind CSS 配置问题 [#317](https://github.com/modern-js-dev/modern.js/pull/317)
- 修复启用 unbundled 模式依赖安装问题 [#12](https://github.com/modern-js-dev/codesmith/pull/12) / [#238](https://github.com/modern-js-dev/modern.js/issues/238)
- 安装依赖和项目 git 初始化失败仅展示警告 [#17](https://github.com/modern-js-dev/codesmith/pull/17)
- @electron/remote 升级 2.0 版本 [#30](https://github.com/modern-js-dev/electron-sprout/pull/30)
- Electron 主进程支持除主目录（electron）外其余目录的编译，比如：shared 目录[#44](https://github.com/modern-js-dev/electron-sprout/pull/44)
- Electron 修复 linux arm64 构建问题。[#47](https://github.com/modern-js-dev/electron-sprout/pull/47)
- 修复 useModel 加载多个 Model 的时候 actions 类型合并问题 [#31](https://github.com/modern-js-dev/reduck/pull/31) / [#30](https://github.com/modern-js-dev/reduck/issues/30)
- 修复 SourceMap 路径问题 [#309](https://github.com/modern-js-dev/modern.js/pull/309)
- 应用项目部署功能[ #320](https://github.com/modern-js-dev/modern.js/pull/320)
## 升级指南
本次更新可通过删除项目 pnpm-lock.yaml 或 yarn.lock 重新安装依赖即可使用 Modern.js 最新版本。
Modern.js 将提供自动升级工具，后续升级可使用升级工具进行，敬请期待。