前端工程化开发是现代前端开发过程中必不可少的环节，其中构建工具的使用就显得格外重要。而今天要介绍的一个 npm 包 rollup-plugin-cdn，是一个支持将本地代码和第三方库资源打包上传到 CDN 服务器的插件，可以极大地提升前端工程化开发的效率和可靠性。本文将详细介绍 rollup-plugin-cdn 的使用方法和注意事项，以及提供示例代码与详细指导，帮助读者快速上手使用。
一、rollup 和 rollup-plugin-cdn
rollup 是一个 ES6 模块打包器，可以将多个模块打包成单个 JS 文件。它的体积小、速度快、完全支持 ES6 模块化等特点，使其在前端代码打包领域具有良好的口碑和广泛的应用。而 rollup-plugin-cdn 则是用来辅助 rollup 进行 CDN 打包的插件，支持将 JS、CSS、图片等资源按需上传到 CDN 服务器，大大提高了前端的性能和用户体验。
二、rollup-plugin-cdn 的安装和使用
在使用 rollup-plugin-cdn 之前，需要先安装 rollup 的相关依赖。可以通过 npm 或 yarn 命令进行安装：
npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-babel rollup-plugin-terser
接下来就可以使用 npm 或 yarn 命令安装 rollup-plugin-cdn：
npm install --save-dev rollup-plugin-cdn
安装完成后，需要在 rollup 的配置文件中配置使用 rollup-plugin-cdn。以 rollup.config.js 文件为例：
-- -------------------- ---- -------
------ -------- ---- -------------------------
------ ------- ---- -----------------------------
------ ----- ---- ----------------------
------ - ------ - ---- -----------------------
------ - ------ - ---- -----------------------
------ --- ---- --------------------
----- ------- - -
---------
-----------
----------
-------
-------- ------------------
--------------- ----
---
---------
-----
-- --- ----
--
--
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- -----------
--
-------- -------
-在 rollup 的配置文件中，可以看到 cdn 配置信息的部分。这里是使用 rollup-plugin-cdn 的关键配置，包括：
cdn：一个布尔类型值，表示是否开启 CDN 打包。如果为 true，则会将 JS、CSS、图片等资源上传到 CDN 服务器，否则就不会。prodUrl：CDN 服务器的地址。当开启 CDN 打包后，所有资源都会上传到该地址。modules：一个数组类型，表示需要从第三方库中引入的模块，支持 ES6 模块和 CommonJS 模块。
举个例子，假设我们有一个 index.html 页面和一个 index.js 文件需要上线，其中 index.js 文件引用了 Vue.js 和 Lodash 库。那么可以通过以下方式来配置 rollup-plugin-cdn：
-- -------------------- ---- -------
------ - ------ - ---- -----------------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ----- ---- -----------------------
------ - ------ - ---- -----------------------
------ --- ---- --------------------
----- ------- - -
---------
----------
-----------
-------
-------- ------------------
------------- ---------
---
---------
-----
---- -----
-------- --------------------------
-------- -
- ----- ------ ---- ------ ----- ------------------------- --
- ----- ------------ ---- ---- ----- ------------------------- -
-
--
--
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- -----------
--
-------- -------
-在以上配置中，cdn: true表示开启 CDN 打包，prodUrl: 'http://cdn.example.com/'为服务地址，modules数组中分别指定了需要从 Vue.js 和 Lodash 库构建的模块。当 rollup 执行打包操作时，会将 dist/vue.runtime.min.js 和 lodash-es/lodash.min.js 两个文件上传至指定的 CDN 服务器，并将 index.js 文件中对应的 import 语句替换成正确的 import 路径。
三、rollup-plugin-cdn 的注意事项
在使用 rollup-plugin-cdn 的过程中，需要注意以下几点：
- rollup-plugin-cdn 只支持将 JS、CSS、图片等静态资源上传至 CDN。如果需要上传动态资源，例如基于 AJAX 技术调用的接口，还需要使用其他工具。
- rollup-plugin-cdn 上传到 CDN 的资源不能使用相对路径访问，否则无法生效。需要使用完整的 CDN 路径或者使用绝对路径。
- rollup-plugin-cdn 上传到 CDN 的资源一旦失效或者需要更新，需要手动刷新 CDN 缓存或者重新上传。
四、rollup-plugin-cdn 的使用示例
为了让读者更好地理解 rollup-plugin-cdn 的使用，这里提供一个简单的使用示例。
假设我们有一个名为 MyLibrary 的前端库需要打包并上传到 CDN 服务器，这个库依赖于 Vue.js 和 Lodash 库。所有的源码文件都在 src/ 目录下，其中 entry.js 为入口文件。我们需要将该库打包成一个 UMD 模块，并将 JS、CSS 资源上传至指定的 CDN 服务器。可以按照以下步骤操作：
- 安装 rollup、rollup-plugin-cdn 等依赖包：
npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-babel rollup-plugin-terser rollup-plugin-cdn
- 创建 .babelrc 文件，用于配置 Babel：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
-
--
---------- -
---------------------------------
-
-该文件中使用了 @babel/preset-env 完成了基本的 ES6 转码，同时使用了 @babel/plugin-transform-runtime 来解决异步方法转换问题。
- 创建 rollup.config.js 文件，用于配置 rollup：
-- -------------------- ---- -------
------ -------- ---- -------------------------
------ ------- ---- ------------------------------
------ ----- ---- -----------------------
------ - ------ - ---- -----------------------
------ --- ---- --------------------
----- ------- - -
----------
-----------
-------
-------- ------------------
------------- ---------
---
---------
-----
---- -----
-------- --------------------------
-------- -
- ----- ------ ---- ------ ----- ------------------------- --
- ----- ------------ ---- ---- ----- ------------------------- -
-
--
--
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- -----------
--
-------- -------
-在以上配置中，使用了 rollup-plugin-cdn 插件将 JS、CSS 资源一并上传至了 CDN。其中modules参数数组中定义了 Vue.js 和 Lodash 库的相关信息，以便使用 CDN 进行打包。
- 在 package.json 文件中配置打包命令：
{
"scripts": {
"build": "rollup -c"
}
}这里使用 -c 选项指定了 rollup 的配置文件为 rollup.config.js。
- 运行 npm run build 命令即可完成打包和上传至 CDN 的操作。
现在，我们已经成功地使用 rollup-plugin-cdn 插件将 MyLibrary 库打包成了一个 UMD 模块，并将 JS、CSS 资源上传至了指定的 CDN 服务器。读者在将该库部署到生产环境时，只需要将相关的 JS、CSS、图片等资源从 CDN 加载即可。同时，当需要更新 MyLibrary 库时，只需要重新上传新的版本，即可完成 CDN 缓存刷新，进而避免了浏览器缓存引发的问题。
五、总结
本文详细介绍了 rollup-plugin-cdn 插件的使用方法和使用注意事项，并提供了一个简单的示例。使用 rollup-plugin-cdn 插件能够将 JS、CSS 利用异地多机房cdn等静态资源上传至 CDN 服务器，提高前端项目的访问速度和用户体验，减少对带宽和服务器的依赖。希望读者能够通过本文的介绍和示例，更好地掌握 rollup-plugin-cdn 的使用方法，并在实际项目中进行应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ca481e8991b448e60f5