前言
在前端开发过程中，我们经常需要使用到一些第三方库，这些库通常会被打包成 npm 包，然后我们使用 npm 进行安装和管理。但是有些情况下，我们希望能够直接在浏览器中引入这些库，而不需要经过打包和构建的过程，以便更加灵活地使用这些库。
在这种情况下，我们可以使用 unpkg 这个在线 CDN 服务来直接引入 npm 包中的文件。但是对于那些采用了新的 ECMAScript 语法或模块系统的 npm 包，直接在浏览器中引入时就会出现问题。这时候，我们可以使用 babel-plugin-unpkg 这个 npm 包来解决这一问题。本文就是一篇针对 babel-plugin-unpkg 这个 npm 包的使用教程。
安装
首先，在你的项目中安装 babel-plugin-unpkg：
npm install --save-dev babel-plugin-unpkg
配置
在你的 babel 配置文件中，添加如下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------- -
-------- -
-------- ------------------------------------
-
-
-
-
-其中 alias 是一个对象，用来设置需要转换的 npm 包和对应的文件路径。例如 react 包的路径为 16.8.6/umd/react.production.min.js。
示例
现在让我们看一下 babel-plugin-unpkg 的具体使用示例。
假设你想要在你的 html 文件中直接引入 react 单个文件，你可以通过以下方式来引入：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ----------
------- --------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
-------
------
---- ----------------
------- ------------------
----- - -------- - - ------
----- - ------ - - ---------
-------- ----- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - --------- -----------
------
-
-
-------------- ---------------------------------
---------
-------
-------但是，上述代码会出现一个错误，提示 Uncaught ReferenceError: require is not defined。这是因为使用了新的 ECMAScript 语法，而浏览器并不支持这些语法。
我们可以使用 babel-plugin-unpkg 来将代码转换成浏览器可识别的语法。在上面的示例代码中，我们已经配置了 alias，所以可以直接在 html 文件中使用 ES modules 语法来引入包：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------- ----------
------- --------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------
------- -----------------------------------------------------------------------
-------
------
---- ----------------
------- ------------------
----- - -------- - - ------
----- - ------ - - ---------
-------- ----- -
----- ------- --------- - ------------
------ -
-----
------ ------- ------- ---------
------- ----------- -- -------------- - --------- -----------
------
-
-
-------------- ---------------------------------
---------
--------
--- ------------- - -------------------------------------------------------------------------------- -
-------- ---------- --------
--------
--------------------
---------
-------
-------其中，我们增加了一个 babel 库的引用，在浏览器中将代码转换为 ES5 语法。现在，你可以在浏览器中愉快地使用新的 ECMAScript 语法啦！
总结
使用 babel-plugin-unpkg，可以让我们在浏览器中直接引入 npm 包中的文件，并且可以使用新的 ECMAScript 语法。这是一种更加灵活的使用方式，可以让我们更加便利地使用第三方库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725b81e8991b448e8803