随着前端项目的不断发展，我们的项目越来越复杂，其中一个问题就是命名空间的管理。Webpack 是前端标配的构建工具，那么如何利用 Webpack 自带的插件，通过 namespace 的方式来管理我们的模块呢？
这就需要使用上面提到的 npm 包 webpack-namespace-plugin。
安装
使用以下命令来安装 webpack-namespace-plugin：
npm install --save-dev webpack-namespace-plugin
使用
在 Webpack 的配置文件中引入 plugin ，并传入一些配置项：
-- -------------------- ---- -------
----- ---------------------- - ------------------------------------
-------------- - -
-------- -
--- ------------------------
---------- --------------
-------------- -----
------------- ------------
---
--
--上面的示例配置了一些参数：
namespace：定义了这个插件创建的全局变量的名称，这里是myNamespace；allowExternal：允许在namespace命名空间外使用外部库，典型的例子如 React 库；ignoreRegExp：匹配需要被忽略的入口文件，这里是指以vendor开头的文件。
注：实际使用中忽略正则的文件应该包括所依赖的库，以及需要排除的第三方依赖，如 jQuery 等。
实战
在真实项目中，可能会使用一些第三方库，这些库的方法与我们自己编写的方法可能会产生同样的命名，为了避免冲突，我们需要把这些库的方法放到我们定义的命名空间下。示例代码：
import * as myLibrary from 'myLibrary'; myNamespace.myLibrary = myLibrary;
然后，我们就可以使用我们定义的命名空间调用第三方库方法：
myNamespace.myLibrary.someFunction()
这样，我们相当于在自己的命名空间中对第三方库进行封装，可以有效避免命名冲突的问题。同时，由于我们在配置文件中定义了 allowExternal，因此我们也能够顺利使用 React 等外部库。
总结
通过使用 webpack-namespace-plugin 插件，我们能够将我们的模块组织在自定义命名空间下，有效避免命名冲突的问题，同时提高了代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822e1b