Webify 新增自动适配框架和一键部署能力

新能力1：自动适配框架

如今 Web 框架、CLI、脚手架工具层出不穷，为开发者们提供便利的同时，也衍生出了一些幸福的烦恼：尽管它们构建部署的流程大同小异，但记住那些琐碎细节着实有些麻烦。

例如，Angular CLI 的默认构建输出目录为 dist，而由 create-react-app 创建的 React 脚手架项目则是把构建输出目录放到 build 中，这些差异导致开发者在创建 Webify 应用时，需要手工填写配置，不仅麻烦，还容易出错。

为了解决此问题，Webify 正式支持了自动适配框架，在创建应用时能够自动识别主流前端框架，提供预设定的配置，帮助开发者轻松构建部署，减轻负担。

能力演示

首先，进入 Webify 控制台，在新建应用页面，选择一个仓库进行导入。

进入应用配置页面后，Webify 就会尝试识别仓库中的项目属于哪个框架，如果识别成功就会根据识别的结果自动填入对应的安装和构建命令以及输出目录。

目前 Webify 支持自动识别的框架有：

• Vue.js (vue-cli)
• React.js (create-react-app)
• Hexo
• Gatsby.js
• Angular
• Next.js SSG
• Nuxt.js SSG
• 持续补足中，欢迎补充??

Webify 如何实现「自动适配框架」？

项目根目录下的 package.json 中记录了项目的第三方依赖关系，这些依赖关系通常能折射出项目许多信息。

例如，用 create-react-app 脚手架创建的 React 项目，都会依赖于 react-scripts 或者 react-dev-utils 这两个 npm 包。

package.json 示例

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "web-vitals": "^1.0.1"
    }
}

所以，如果项目具有 react-scripts 或者 react-dev-utils 的依赖，那就表示项目大概率是使用 create-react-app 脚手架创建的 React 项目。

由此，Webify 便能自动选取最适合此框架的构建、部署配置。

后续规划

目前我们已经支持了社区内部分流行的框架，后续我们将不断补充对于框架的支持，以保证开发者尽量以“零配置”进行开发和部署。如果您有对于框架支持的需求，可以前往 云开发 CloudBase 开发者社区 进行反馈。

云开发 CloudBase 开发者社区：https://bbs.cloudbase.net/

新能力2：一键部署

对于大多数开源项目的作者而言，能够通过某种方式快速分发、部署自己的项目，可以大大降低项目的使用门槛，方便在社区里进行分享。

Webify 近期支持了一键部署按钮，为开发者提供轻轻一点即可将部署项目到 Webify 的能力。

用户点击按钮后，就可以直接进入到创建 Webify 应用的流程中（以 React 模板项目为例）：

如何生成自己项目的按钮？

Webify 提供一键部署按钮生成器，开发者可以根据自己项目的实际情况，配置 仓库地址、子目录、默认应用名 等参数，为自己的项目生成专属的一键部署按钮！

Webify 提供 Markdown、HTML、URL 等形式的代码片段，开发者可以根据需要将生成的按钮代码片段，放入项目的 README、主页、Wiki 等处。

代码片段示例（Markdown）：

[![](https://cloudbase.net/deploy.svg)](https://console.cloud.tencent.com/webify/new?tpl=https%3A%2F%2Fgithub.com%2FTencentCloudBase%2Fwebify-templates&dir=react-app&reponame=my-webify-app)

详见一键部署文档：https://webify.cloudbase.net/docs/guides/deploy-button

Webify官方网站：https://webify.cloudbase.net/