npm 包 @jameslnewell/rollup-config 使用教程

阅读时长 3 分钟读完

前言

前端工程化是一件既有技术含量,又有实际帮助的事情。而其中,打包工具则是前端工程化中必不可少的一环。Rollup.js 是一种常用的打包工具,在处理可见的代码时效率高于其他打包工具。

@jameslnewell/rollup-config 是一个面向 Rollup.js 的开源配置库,允许开发者快速设置代码打包的相关配置。

在本篇文章中,我们将详细介绍如何使用这个 npm 包。读完本文后,您将学会如何安装、配置、使用该包并快速上手。

安装

使用 @jameslnewell/rollup-config 需要先安装它。你可以在你的项目目录下使用以下命令:

配置

在使用 @jameslnewell/rollup-config 之前,先来看一下如何配置:

-- -------------------- ---- -------
-- ----------------
------ - ------------ - ---- ------------------------------

----- --------- - -------

------ ------- --------------
  ------ ---------------
  ----- ------------
  ----------
  -------- ------- ----- -------
---

在上面的配置中,我们指定了输入文件路径(input)、库的名字(name)、输出文件夹路径(outputDir)以及我们需要导出的模块格式(formats)。

使用

接下来,我们将介绍如何使用这个配置来打包我们的代码。我们需要执行以下命令:

其中,-c 指定的是 rollup 配置文件,即我们上面创建的 rollup.config.js

示例

为了更好地理解如何使用 @jameslnewell/rollup-config,这里为你准备了一个示例:

我们首先在 src 目录下创建一个 index.js 文件,内容如下:

接着,我们编写一个测试文件 test.js

最后,我们开始配置并打包代码。打开您的终端并输入以下命令:

通过执行 npx rollup -c 命令,我们将使用我们的 rollup.config.js 配置文件来打包我们的代码。

输出结果将在 dist 目录下生成名为 my-library.esm.js, my-library.cjs.jsmy-library.iife.js 的文件。

我们在测试文件中引入 my-library.cjs.js,并调用 helloWorld 函数。

以上就是使用 @jameslnewell/rollup-config 的完整流程和示例。在未来的开发工作中,您可以尝试在 Rollup.js 中使用 @jameslnewell/rollup-config 来进行快速配置和打包。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f72fb17a9b7065299ccbbf8

纠错
反馈