前言
在前端开发中，我们常常需要引用第三方库来帮助我们实现某些功能。而我们经常使用 npm 作为管理工具来引入这些第三方库。但有时我们引入的库依赖了其他的第三方库，这时我们就需要用到 weex-external-dep 这个 npm 包来帮助我们处理这些依赖关系。
weex-external-dep 简介
weex-external-dep 是一个 npm 包，可以将依赖的第三方库封装在一个名为 externalModules 的数组中，并告诉 webpack 运行时在哪里可以找到这些依赖。这为我们处理复杂的依赖关系提供了极大的便利。
使用方法
使用 weex-external-dep，我们需要先安装此包：
--- ------- ----------------- ----------
接下来，我们可以在自己项目的 webpack.config.js 文件中配置如下内容：
----- --------------- - -----------------------------
-------------- - -
----- ------------- -- - -----------
------ ---------------
-- --- ----- --- --
-------- -
-- ------ --
--- -----------------
---------- -
- ----- -------- ------- -------- ------- ------- --
- ----- -------- ------- -------- ------- ------- --
-- --- ------ --- --
-
--
-
--上述代码配置了 weex-external-dep 处理了项目中的若干个库的依赖关系。
其中，WeexExternalDep 的构造函数中，我们需要传递一个 options 参数对象。该对象包含一个 externals 属性，它是一个数组，数组中的每个对象代表一个依赖项。对象中的三个属性分别表示：依赖项的名称、依赖项的模块名以及依赖项的全局变量名。
我们可以使用 name 属性来给依赖项定义名称，这样我们就可以在代码中使用该名称来引用这个依赖项。module 属性表示这个依赖项所对应的模块名。global 属性表示这个依赖项在全局作用域中所对应的变量名。
需要注意的一点是，当 module 和 global 属性相同时，可以省略 global 属性。
示例代码
下面是一个使用 weex-external-dep 处理外部依赖项的示例代码：
----- --------------- - -----------------------------
-------------- - -
----- -------------
------ ---------------
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -----------------
---------- -
- ----- -------- ------- -------- ------- ------- --
- ----- -------- ------- -------- ------- ------- -
-
--
-
---- --------
------ ----- ---- --------
------ ----- ---- --------
---------------------------------------------------------
-------------- -- -
---------------------------
--
------------ -- -
-------------------
---
----- ----------- - -- -- -
------ ----------- ------------
-
---------------------------- --- ---------------------------------结论
在前端开发中，我们经常需要引入第三方库来帮助我们完成某些功能。使用 npm 管理第三方库，可以为我们提供极大的便利。但一些第三方库又会依赖其他的库，这就需要我们使用 weex-external-dep 这个 npm 包来帮助我们处理这些复杂的依赖关系。在进行项目开发时，我们只需要简单配置一下 weex-external-dep，就能够轻松地引用多个外部的第三方库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055d3e81e8991b448db042