在前端开发过程中，我们经常需要生成静态网站。而 metalsmith 是一个静态网站生成器，可以通过使用不同的插件，轻松的完成各种不同的任务。而 metalsmith-firebase 作为 metalsmith 的插件之一，可以将生成的静态网站部署到 Firebase 中，使得网站可以通过 Firebase 的 CDN 加速访问，并实现其他 Firebase 相关的功能。本文将介绍如何使用 metalsmith-firebase 实现部署网站到 Firebase 的功能。
安装
首先需要在终端中进入项目目录，之后通过 npm 安装 metalsmith 和 metalsmith-firebase，命令如下：
npm install metalsmith metalsmith-firebase --save-dev
安装完成之后，可在项目目录下的 package.json 文件中查看是否安装成功。
使用方法
首先需要在项目中创建一个 metalsmith 的配置文件 metalsmith.js，并进行相关的配置和插件的引入。创建完成后，可在其中添加 metalsmith-firebase 插件，使用如下代码：
-- -------------------- ---- ------- ----- -------- - -------------------------- ----- ------------------ - ------------------------------- ---------- --- ------------------------- --------- --------- -- -------- ---- -------- - -------- ---------------------- ------ ---------- --------- ------------------------------- ------- ---------------- -------- ---------- -- ------------ - ----展开代码
其中，必须设置的参数是 project 和 token。project 需要设置为你的 Firebase 项目的名称，而 token 则是 Firebase CLI 的身份验证令牌。其他参数可选，根据需要设置。
在代码中，使用了 Firebase CLI 工具进行自动部署。所以在使用前需要先登录 Firebase CLI 工具，命令如下：
firebase login:ci --interactive
成功登录后，会生成一个身份验证令牌，将其保存下来，并使用该令牌填充上面示例代码中的token参数即可。
示例代码
以下为完整的使用 metalsmith-firebase 的示例代码：
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- -------- - -------------------------- ----- -------- - ------------------------------- ----- -------- - ------------------------------- ----- ------- - ------------------------------ ----- ----------- - ---------------------------------- ----- ---------- - --------------------------------- ----- ------ - ----------------------------- ----- ------- - ------------------------------ ----- ---- - ------------------------------- ----- ------- - ------------------------------- ----- ------------------ - ------------------------------- --------------------- --------------------- ---------------- ----------------------- ------------ ---------------- --------------- ------------------ ------ - -------- --------------- ------- ------------ -------- ---- - --- ------------------ ------------- ------- ----------- ------------ ---------- --- -------------- --------- --------------------- --- ----------- ----------- -------- ------ --- ------------ --------- --- -------------- ------- ------------- ---------- ----------- --- ------------------------- --------- --------- -------- - -------- ---------------------- ------ --------------- --------- ------------------------- ------- ---------------- -------- ---------- -- ------------ - --- --------------- ----- ------ - -- ----- - ----- ---- - ---- - ------------------ ------------ - ---展开代码
结语
使用 metalsmith-firebase 可以方便快捷地将静态网站部署到 Firebase 上，实现 CDN 加速以及其他 Firebase 功能，对于前端开发人员来说，是一个十分方便的工具。希望本篇文章对读者有所帮助，更多详情请参考 metalsmith-firebase 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb60ab5cbfe1ea06114c6
