在前端开发中，我们常常需要将代码打包成一个完整的 JS 文件。Rollup 是一个 JavaScript 模块打包器，它可以让我们在打包时只打包我们需要的模块，从而减少冗余代码，优化打包结果。
而 rollup-plugin-thatworks 则是一款方便的 Rollup 插件，它可以帮助我们直接引入第三方库，无需手动创建外部链接。在本文中，我们将详细介绍 rollup-plugin-thatworks 的使用方法。
安装 rollup-plugin-thatworks
rollup-plugin-thatworks 是一个 npm 包，我们可以通过 npm 来安装：
npm install rollup-plugin-thatworks --save-dev
使用 rollup-plugin-thatworks
要在 Rollup 中使用 rollup-plugin-thatworks，我们需要在 Rollup 配置文件中引入该插件，并进行一些配置。
比如，我们有如下两个文件：
// index.js import jquery from 'jquery' $(function() { // ... })
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ ------------- ------ --------- ------------ ------- ------------------------------------------------------ ------- ------------------------------ ------- ------ ---- --- --- ------- -------展开代码
我们可以通过 rollup-plugin-thatworks 来让 rollup 打包时将 jquery 直接打包到我们的代码中，而无需在 HTML 文件中手动引入：
-- -------------------- ---- ------- -- ---------------- ------ --------- ---- ------------------------- ------ ------- - ------ ----------- ------- - ----- ----------------- ------- ------ -- -------- - ----------- -------- --------- ------- -------------------- -- - -展开代码
在上面的代码中，我们通过 thatworks 插件的 resolve 和 module 参数来指定 jquery 的入口文件和导出的模块文件。
示例代码
下面我们提供一个完整的 rollup-plugin-thatworks 示例代码，供参考：
-- -------------------- ---- ------- -- -------- ------ ------ ---- -------- --------------------------------- ------------- - --- -- ---------------- ------ --------- ---- ------------------------- ------ ------- - ------ ----------- ------- - ----- ----------------- ------- ------ -- -------- - ----------- -------- --------- ------- ----------- -- - - -- ------------ - ------- ------------------------------- ---------- -------- ------------------ - --------- --------- -------------------------- -------- -- --------------- - --------- ---------- -- ---------- - -------- ------- --- - - -- --------- --- - - - ----- --------------- ---------- - ------ -------------------------------- ---------- - - ------ ------- -展开代码
在上面的示例中，我们使用了 lodash 库，并通过 rollup-plugin-thatworks 来直接使用 lodash，无需手动在 HTML 文件中引入。
通过运行 npm run build 命令，我们可以编译出一个打包好的 JS 文件。
总结
rollup-plugin-thatworks 是一个非常方便的 Rollup 插件，可以让我们在 Rollup 打包时无需手动在 HTML 文件中引入第三方库。本文中我们介绍了如何安装和使用 rollup-plugin-thatworks，并提供了一个完整的示例代码。在实际开发中，我们可以根据自己的需要进行配置和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc3d2b5cbfe1ea0612160
