前言
在前端开发过程中，我们通常需要将静态资源上传到云端存储，如 Amazon S3。而 metalsmith-s3 就是一个能够帮助我们在 build 过程中自动上传静态资源到云端存储的 npm 包。它是基于 metalsmith 的插件，可在 metalsmith 构建流程的最后一步自动上传生成的静态资源。
本文将介绍如何使用 metalsmith-s3，包括安装，配置，以及使用实例。
安装
首先，我们需要在项目中安装 metalsmith 和 metalsmith-s3 ：
npm install metalsmith metalsmith-s3 --save-dev
配置
接下来，我们需要将 metalsmith-s3 添加到我们的 metalsmith 的配置中。在 metalsmith 配置文件中，我们需要完成以下配置：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -- - -------------------------
---------------------
---------
------- --------
------- -------------------
------------ ----------
---------------- ----------
------- --------------
---- -------------
---
---------注意，s3() 函数需要传入一个配置对象，包括以下字段：
- action: 操作类型，可以是 "write" 或 "delete"
- bucket: 存储桶名称
- accessKeyId: 访问密钥 ID
- secretAccessKey: 访问密钥 Key
- region: 存储桶所在地区
- acl: 访问权限，可以是 "public-read" 或 "private"
其中，accessKeyId 和 secretAccessKey 是 AWS 的访问密钥 ID 和 Key，需要在 AWS 控制台中创建一个名为“静态网站”的 IAM 用户，并为该用户授予 s3 权限，然后将密钥信息添加到配置文件中。
使用示例
假设我们有一个项目，包含以下文件夹和文件：
- src/
- css/
- main.css
- img/
- avatar.png
- index.html
- README.md我们的目标是将这些文件上传到 S3 存储桶中。
在 metalmsith 配置文件中，我们可以这样写入：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -- - -------------------------
---------------------
--------------
---------------------
---------
------- --------
------- -------------------
------------ ----------
---------------- ----------
------- --------------
---- -------------
---
-------------------- ------ -
-- ----- - ----- ---- -
------------------ ------------
---当我们运行 build 命令时，metalsmith-s3 就会自动将生成的静态资源上传到 S3 存储桶中。
我们也可以添加一些自定义的选项，例如指定 S3 存储桶中的目录路径：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- -- - -------------------------
---------------------
--------------
---------------------
---------
------- --------
------- -------------------
------------ ----------
---------------- ----------
------- --------------
---- --------------
------- -------------
---
-------------------- ------ -
-- ----- - ----- ---- -
------------------ ------------
---这将把生成的静态资源上传到 S3 存储桶中的 "my-project/" 目录下。
结论
在开发过程中，我们通常需要将静态资源上传到云端存储，例如 Amazon S3。metalsmith-s3 可以让我们在构建过程中自动上传静态资源，大大简化了我们的工作流程。本文介绍了如何使用 metalsmith-s3 包，对于需要上传静态资源的前端开发者来说，这是一篇非常有参考意义的文章。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d58