什么是 npm 包 parcel-plugin-externals？
parcel-plugin-externals 是一个用于 Parcel 打包工具的插件，用于从打包的文件中排除指定的模块包，使得这些模块包不会被打包进最终的输出文件中。
为什么需要使用 parcel-plugin-externals？
在一些情况下，我们可能需要在前端项目中使用一些其他的 JavaScript 模块包，比如从 CDN 引入的 jQuery 或者其他一些流行的库。对于这些模块包，我们没有必要将它们打包到最终的输出文件中，因为它们已经在 HTML 文件中被引入了。这样一来，可以减小最终输出文件的体积，提高应用的性能。
如何使用 parcel-plugin-externals？
安装 parcel-plugin-externals
首先，我们需要安装 parcel-plugin-externals npm 包。可以使用 npm 命令行工具，执行以下命令：
npm install parcel-plugin-externals --save-dev
配置 parcel-plugin-externals
我们需要在 Parcel 的配置文件中，添加配置项来指定要排除的模块包。我们可以在 .parcelrc 或者 package.json 文件中，添加类似如下的配置项：
-- -------------------- ---- -------
-
------- ------------------
---------- --------
--------- -
---------- -
------------ -
-------- --------
------------ ----------
-
-
-
-上面的配置项表示，我们要排除 react 和 react-dom 两个模块包，这些模块包将被导出为全局变量 React 和 ReactDOM 。
当然，我们也可以使用其他方式来为模块包指定全局变量名。
在代码中使用排除的模块包
在代码中，我们可以直接引用我们排除的模块包：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>Hello, World!</div>
);
ReactDOM.render(<App />, document.getElementById('root'));在这个例子中，我们直接引入了 react 和 react-dom 两个模块包，虽然这两个模块包被排除在首次加载的 JavaScript 文件之外，但我们仍然可以使用这些模块包提供的函数和对象。
示例代码
下面是一份使用 parcel-plugin-externals 的示例代码，可以直接复制保存，然后在终端使用 npm start 命令运行：
package.json
-- -------------------- ---- -------
-
------- ------------------
---------- --------
---------- -
-------- ------- -----------
--
--------------- -
-------- ----------
------------ ---------
--
------------------ -
----------------- ----------
-------------------------- --------
--
--------- -
---------- -
------------ -
-------- --------
------------ ----------
-
-
-
-index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------ --------- ---------------
-------
------
---- ----------------
------- ------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------
------- ---------------------------
-------
-------index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>Hello, World!</div>
);
ReactDOM.render(<App />, document.getElementById('root'));总结
parcel-plugin-externals 是一个非常有用的插件，可以帮助我们在前端项目中减小输出文件的体积，提高应用的性能。在使用这个插件时，我们需要注意指定要排除的模块包，并且在代码中正确地使用这些模块包。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc00cb5cbfe1ea0611c6b