在前端开发中，选择合适的工具和配置对于开发效率和代码质量都至关重要。其中，Rollup 是一款打包工具，在项目优化和代码性能方面有着很好的表现。而 @mqschwanda/rollup-config-default 推出的 Rollup 配置是一种非常不错的选择，它支持常见的开发环境，包含常用插件，能够大大降低对配置的学习成本。本文将为大家介绍如何使用 @mqschwanda/rollup-config-default 配置 Rollup，以及该配置的使用和学习指南。
安装
安装 @mqschwanda/rollup-config-default 很简单，只需要使用 npm 或 yarn 先安装 Rollup，然后使用以下命令即可进行安装：
npm install @mqschwanda/rollup-config-default --save-dev
yarn add @mqschwanda/rollup-config-default --dev
使用
在安装完成后，我们需要使用 @mqschwanda/rollup-config-default 配置 Rollup 的打包过程：
-- -------------------- ---- ------- ------ - ------ - ---- --------- ------ ------------- ---- ------------------------------------ ----- -------- -------- ----- ------ - ----- ----------------------------------- ------------------------------------------ - --------
以上代码中，我们利用 @mqschwanda/rollup-config-default 的默认选项作为 Rollup 的输入与输出参数，通过 Rollup 打包代码。
参数说明
@mqschwanda/rollup-config-default 的默认参数配置如下：
-- -------------------- ---- -------
------ ------- -
------------- -
------ ---------------
--------- -----------
-------- -
-----------
--------------
-------
-------- ------------------
-------- ------
-------- -
-
--------------------
-
-------- ------
--
--
--
-------- -
-
------------------------------------------
-
------ -----
--
--
--
---
---------
-
--
-------------- -
----- -----------------
------- ------
----- -----------
---------- -----
-
--inputOptions
input： 指定打包的入口文件路径。external： 指定应该被视为外部模块的导入。plugins： 插件数组，用于处理 Rollup 打包过程中特殊需求和情况。默认使用了commonjsnodeResolvebabel和terser四个插件。
outputOptions
file： 输出文件路径，需为绝对路径。format： 输出文件格式，可以是 'amd', 'cjs', 'system', 'es', 'iife' 或 'umd'。name： 打包文件的全局变量，比如在浏览器中，iife 格式的包可以通过 <script> 标签引入，这个全局变量就是类似一个命名空间的作用。</li> <li><code>sourcemap</code>： 是否生成 sourcemap 文件。</li> </ul> <p>除了默认的参数配置，我们也可以通过自定义参数配置 <code>@mqschwanda/rollup-config-default</code>，或者使用多个配置文件来覆盖默认配置。</p> <h2>示例</h2> <p>以下是通过 <code>@mqschwanda/rollup-config-default</code> 打包一个简单工具库的示例代码：</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- ------ ------ ---- --------- ------ -------- -------- - ------ --------------- - ------ -------- ------------- - ------ -------------------- -</pre><p>执行以下命令即可生成打包后的文件：</p> <pre class="prettyprint login bash">npx rollup -c</pre><p>使用以上示例参数配置，输出的打包文件路径应该为 <code>dist/bundle.js</code>，当然我们也可以在上述例子中自定义参数配置。</p> <h2>总结</h2> <p><code>@mqschwanda/rollup-config-default</code> 作为一个 <code>Rollup</code> 的配置包，集成了一些常用 Rollup 插件和默认配置，其使用十分方便，大大降低了对 <code>Rollup</code> 配置相关知识的要求，使得开发人员可以更专注于项目开发本身，提高开发效率。希望本文能对您在使用本包时提供帮助。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/113440">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/113440">https://www.javascriptcn.com/post/113440</a></p> </blockquote>