npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cloudbase/framework-plugin-website

v1.9.7

Published

云开发 Tencent CloudBase Framework Website Plugin 插件

Downloads

807

Readme

Tencent CloudBase Framework Website Plugin

Github License Npm version issue PRs Welcome star

云开发 CloudBase Framework 框架「Function」插件: 通过云开发 CloudBase Framework 框架将静态网站一键部署云开发环境,提供生产环境可用的 CDN 加速、自动弹性伸缩的高性能网站服务。可以搭配其他插件如 Node 插件、函数插件实现云端一体开发。

功能特性

  • 节约成本: 资源伸缩,弹性扩缩容,灵活计费,极大节约资源成本
  • 极简配置:自动检测框架,无须配置,同时支持没有使用框架的纯静态项目
  • 框架支持: 无缝支持原生和前端框架构建的项目
    • Vue
    • React
    • Next SPA
    • Nuxt SPA
    • VuePress

使用方法

步骤一. 准备工作

具体步骤请参照 准备云开发环境和 CloudBase CLI 命令工具

步骤二. 进入网站项目目录进行初始化

如果目前已有网站应用项目

cloudbase

如果想全新开始一个项目,可以直接执行 init 来从模板开始一个网站项目

cloudbase init

步骤三. 一键部署

cloudbase framework deploy

配置

默认情况下不需要任何配置即可使用,以下配置参数针对有特殊需求的场景

配置示例

cloudbase init 之后会创建云开发的配置文件 cloudbaserc.json,可在配置文件的 plugins 里修改和写入插件配置

{
  "envId": "{{envId}}",
  "framework": {
    "plugins": {
      "client": {
        "use": "@cloudbase/framework-plugin-website",
        "inputs": {
          "installCommand": "npm install --prefer-offline --no-audit --progress=false",
          "buildCommand": "npm run build",
          "outputPath": "dist",
          "cloudPath": "/path",
          "ignore": [".git", ".github", "node_modules", "cloudbaserc.js"]
        }
      }
    }
  }
}

配置参数说明

commands

选填,对象格式

自定义命令,声明应用安装/构建的自定义命令,会在当前项目目录下进行执行

commands.install

安装命令,如npm install,没有可不传

默认值 npm install --prefer-offline --no-audit --progress=false

commands.build

构建命令,如npm run build,没有可不传

outputPath

网站静态文件的路径。

cloudPath

静态资源部署到云开发环境的路径,默认为根目录。

ignore

静态资源部署时忽略的文件路径,支持通配符

默认值 ['.git', '.github', 'node_modules', 'cloudbaserc.js']

envVariables

环境变量键值对,会被注入到静态网站根目录下,可以在网页 html head 里加入一行代码来获取

<script src="/_init_tcb-env.js"></script>

在 JS 代码中就可以通过 window._tcbEnv 来获取所有的变量

注入的环境变量有:

  • TCB_ENV_ID: 当前环境的环境 ID
  • TCB_SERVICE_DOMAIN: 当前环境的云开发 HTTP 访问的默认域名(云接入域名)
  • TCB_REGION: 当前环境的地域
  • 以及用户注入的其他 envVariables

注意同一环境下不同 web 应用的变量会进行合并,可以在环境变量命名时加以区分

更多插件

请访问 CloudBase Framework 插件列表 搭配使用其他插件

文档资料