1. 前言
externr 是一个 npm 包，可以通过它来将当前项目的依赖项与库中的引用分离，以便进行缓存和优化，从而提高整体性能。该包能够自动地生成一个 externals 配置对象，也可以利用它来生成自定义 externals 配置。
2. 安装
在使用 externr 之前，我们需要先安装它。可以使用 npm 命令进行安装:
npm install --save-dev externr
3. 示例代码
假设我们正在构建一个 React 应用，并且依赖了三个库：React、lodash 和 axios。为了优化项目性能，我们需要将这些库的引用与项目的依赖项分离，以便 webpack 进行处理和优化。
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
----- --------------
------ ------------------
------- -
--------- ------------
----- ----------------------- --------
--
---------- ---------
------ --------
------------ -
--------- ------------
---------- ------------
---- ------------
----- ----
--
------ -
--------- --------
---------- --------
---- --------
----- --------
--
---
------- -
------ -
-
----- ---------
-------- ---------------
---- -
------- ---------------
--
--
--
--
-------- -
----------- ------- --------
--
--在上面的示例代码中，我们引入了 Externr 方法，并使用它创建了一个 externals 配置对象，在这个对象中，我们分别将 react、lodash-es 和 axios 三个库的引用分别设置为 'React'、'_' 和 'axios'。
其中，'lodash-es' 在 externr 中的配置使用的是一个对象，该对象包含了一系列属性：
commonjs：表示包含有所需模块的 CommonJS 或 Node.js 模块的位置；commonjs2：表示包含所需模块的 CommonJS 或 Node.js 模块的位置，如果没有则为 undefined；amd：表示包含所需模块的 AMD 模块路径；root：表示通过 script 标签引入该库时，该库在全局作用域下的名称。
在上面的例子中，我们定义了这些属性，以便在不同的环境中引用外部库。
4. 结语
在前端开发中，为了提升项目的性能，我们需要对项目中引用的外部库进行优化。通过 externr 包，我们可以轻松地实现依赖项和库的分离，从而优化项目性能。
同时，本篇文章介绍了 externr 的使用方法和示例代码，希望能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/181178