在前端开发过程中，我们经常会使用书签（bookmarklet）来快速访问一些常用功能或调试工具。但是书签需要手工编写，容易出错，且不方便分享和更新。为了解决这个问题，有人开发了一个叫做 marklet 的 npm 包，可以帮助我们更便捷地创建和管理书签。这篇文章将为大家介绍 marklet 的具体使用方法。
什么是 marklet？
marklet 是一个用来创建和管理书签的 npm 包。它让你可以使用 JavaScript 来定义你的书签，然后将其保存在一个 JSON 文件中，以便在任何浏览器中使用。你可以使用 marklet 提供的命令行工具来管理你的书签集合，也可以在你的应用中使用 marklet 的 API。
安装 marklet
在开始之前，我们需要先安装 marklet。打开终端并输入以下命令：
npm install -g marklet
这将全局安装 marklet 命令行工具。
创建一个简单的书签
我们来尝试一下用 marklet 创建一个简单的书签。首先，创建一个新的目录并在其中初始化一个新的 npm 包：
mkdir my-bookmarks cd my-bookmarks npm init -y
现在，我们可以在项目中使用 marklet 了。创建一个新的 JavaScript 文件 my-bookmark.js，并输入以下内容：
location.href = 'https://www.google.com/';
这是一个非常简单的书签，它会将当前页面定向到 Google 的首页。我们使用了 location.href 方法来修改当前页面的 URL。
接下来，使用 marklet 命令行工具来将这个脚本打包成一个书签：
marklet build my-bookmark.js -o my-bookmark.json
此命令将在当前目录下创建一个名为 my-bookmark.json 的文件，其中包含了以上脚本的打包内容。
现在，你可以将该书签的内容复制到书签管理器中，或者使用一个 JavaScript 代码段来动态添加它。下面是一个将其添加到页面上的按钮的示例：
<button onclick="document.head.appendChild(Object.assign(
document.createElement('script'),
{ src: 'data:text/javascript,' + encodeURIComponent(JSON.parse('my-bookmark.json').code) }
))">Google</button>这里，我们为按钮添加了一个单击事件，该事件会动态将书签脚本添加到页面中。注意，在使用 JSON.parse 方法之前，我们需要先解码一下 JSON 文件的内容。
高级用法
除了上述简单用法，marklet 还提供了很多高级特性，例如：
变量引用
marklet 可以让你在书签脚本中使用全局变量。例如，在你的脚本中，你可以使用 window 对象，或你自己应用定义的全局变量。注意，这些变量在书签执行环境中必须是可访问的。
console.log(`我在 ${window.location.href} 上！`);引入外部库
你可以在你的书签脚本中引入和使用外部 JavaScript 库，只需要将库文件的 URL 加入到 externals 数组中即可。
marklet.config.externals.push('https://unpkg.com/lodash/lodash.min.js');现在，在你的书签脚本中，你可以自由地使用 Lodash 库提供的方法。
使用自定义配置
你可以使用 marklet 提供的 config 方法来配置你的 marklet 工具链。例如，你可以设定自定义的文件名模板：
marklet.config.filenameTemplate = (name) => `bookmark-${name}.js`;现在，输出书签脚本时，marklet 会将其命名为 bookmark-my-bookmark.js。
自定义文件输出目录
默认情况下，marklet 会将书签脚本输出到当前工作目录。你可以通过设置环境变量 MARKLET_OUT_DIR 来指定输出目录。
结论
在这篇文章中，我们学习了如何使用 marklet，一个能够帮助我们更方便地创建和管理书签的 npm 包。通过 marklet，我们可以使用 JavaScript 来定义和打包书签脚本，还可以使用 marklet 提供的高级用法来引入外部库或定制工具链。希望这篇文章对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64044