什么是 babel-plugin-unpkg-rewrite ?
babel-plugin-unpkg-rewrite 是一个用于将 npm 包中的导入（import）语句重写为 unpkg CDN 地址的 Babel 插件。它的主要作用是加速页面的加载速度，减少 CDN 请求次数，也可以实现在线调试和开发。
安装和使用
安装：
npm install babel-plugin-unpkg-rewrite --save-dev
使用：
在 .babelrc 配置文件中加入插件配置：
-- -------------------- ---- -------
-
---------- -
-
----------------
-
------------- --------------------
------------ -
-------- --------
------------ ----------
-
-
-
-
-配置项说明：
baseCDNUrl：指定 unpkg CDN 的地址，默认值为 "https://unpkg.com"。externals：指定要替换的模块名和全局变量名的对应关系。
示例代码
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>Hello, World!</div>,
document.getElementById('root'),
);使用 babel-plugin-unpkg-rewrite 后，将会被转换成如下代码：
-- -------------------- ---- -------
------------------ -
-------- ----------------- -
----- ------ - --------- ----
------------------------- --------------- ---------
------ ---------------
-
-----------
----
-- ---------------- -------- -------- -
----- ------ - ------
----- --------- - ---------
-- --------------- ---- --------- --
-- ---- -------------- -----
-----------------
--------------------------- ----- ------- ---------
--------------------------------
--
--
---深度和学习
使用 babel-plugin-unpkg-rewrite 可以有效地减少 CDN 请求次数，提高页面的加载速度，但是也需要注意一些问题：
- 为了避免 CDN 缓存出现问题，建议在
baseCDNUrl中指定具体版本号，如 "https://unpkg.com/[email protected]"； - 使用本工具也意味着你需要将生产环境的依赖程序包仍然直接链接到 CDN。
同时，在前端开发中，CDN 的使用不仅仅是一个性能问题，还可以实现远程部署和调试等功能。因此，如果有兴趣深入了解 CDN 的更多应用场景和使用技巧，可以继续学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725b81e8991b448e8801