前言
对于前端开发者来说，构建和打包代码是非常重要的一环，从而优化前端性能、提高开发效率。而 rollup.js 是一个优秀的 JavaScript 模块打包器，它可以将指定入口文件中用到的模块打包成一个文件。而 @nju33/rollup-preset 这个 npm 包，则是一个 rollup 配置预设，可以帮助你快速高效地完成代码打包。
本篇文章将详细介绍如何使用 @nju33/rollup-preset 这个 npm 包，让你快速上手 rollup 配置。
安装
使用 @nju33/rollup-preset，需要先在项目中安装 rollup：
npm install rollup -D
然后再安装 @nju33/rollup-preset：
npm install @nju33/rollup-preset -D
使用
在项目中使用该配置，需要新建一个 rollup.config.js 文件，配置内容如下：
-- -------------------- ---- ------- ------ --- ---- ---------------- ------ - ------------ - ---- ---------------------- ----- ----- - -------------- ----- ---- - ---------- ------ ------- -------------- ------ ----- -------- ------------ --
这个配置文件通过 @nju33/rollup-preset 提供的 createConfig 方法生成的是一个默认配置，其中的参数解释如下：
input: 打包入口文件路径，支持通配符。name: 打包后的输出名称，也可用于 umd 包的名称。version: 你的包版本号，会在输出文件的头部显示。
如果你需要自定义配置，也可以按照 rollup 的方式进行配置，然后再将自定义配置和默认配置合并即可，例如下面这样：
-- -------------------- ---- -------
------ - ----- - ---- --------
------ - ------------- ------------- - ---- ----------------------
------ ------- -------------------- -
------ ---------------
------- -
----- -----------------
------- ------
--
--参数说明
除了上述参数外，还有一些常用参数作为属性可以进行配置：
-- -------------------- ---- -------
-
-- -----------------
------ ---------------
-- ------------- --- ---------- ------------ -- ----
----- -----------
-- --------------- ------------ -- ----
--------- ---------------
-- ------------------
------- ------
-- ---------------------------------------
----- ---
-- -----------------------------------
---- ---
-- --- ------ --- ---------- ----- ------------------- -------------------------
------------ -----
-- --------
-------- ---
-- ---------------
-------- -----
-- ----------
----- -
-
------- ---------------------
----- -----------------
----- ----------------
--
--
-参数说明：
filename: 输出文件的文件名，默认是my-module.js。如果设置了该值，则dest中的{name}将会被替换成filename的值。format: 输出模块的模块格式。默认是esm，可选的值有'amd' | 'cjs' | 'esm' | 'iife' | 'umd' | 'system' | 'auto' | undefined。如果使用iife或umd输出格式，那么输出文件名称及 format 值都必填。dest: 输出文件路径，默认是dist/{name}{suffix}.js。其中的{name}将会被替换成name参数的值，默认是package.json的 name 字段；{suffix}表示文件的输出格式，如果格式为 iife 或者 umd，则默认为.min，否则默认为空字符串。cwd: 工作目录的绝对路径，默认是__dirname。development: 是否为开发环境，该参数将会影响打包文件中process.env.NODE_ENV的值。globals: 用于配置全局变量的对象。对象的 key 表示导入全局变量的依赖名称，value 表示全局变量的名称。例如：{ jquery: '$' }。verbose: 是否打印详细的打包信息。copy: 静态文件拷贝配置参数，数组中每个元素为一个对象，每个对象都具有target、dest、base三个属性。其中target表示要拷贝的文件或文件夹所在路径，dest表示要将文件拷贝到的路径，base表示过滤掉文件路径前缀的路径长度。
示例代码
-- -------------------- ---- -------
-- ----------------
------ --- ---- ----------------
------ - ------------ - ---- ----------------------
----- ----- - --------------
----- ---- - ----------
------ ------- --------------
------
-----
-------- ------------
------- -
----- -----------------
------- ------
--
----- -
-
------- ---------------------
----- -----------------
----- ----------------
--
--
--结语
通过本文的介绍，相信大家已经对 @nju33/rollup-preset 这个 npm 包有了更深入的认识，并且在实践应用中能够顺利使用。如果大家还有任何疑问，欢迎在评论区留言，让我们一起来学习和探讨。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587c81e8991b448d5bf4