在前端开发中，我们经常需要在浏览器端使用 CommonJS 或者 ES6 的模块语法，而浏览器并不原生支持这种语法。为了解决这个问题，我们可以使用 browserify 这样的工具将 CommonJS 或者 ES6 的模块语法转换为可以在浏览器中直接使用的语法。但是，使用 browserify 的时候可能会遇到一个问题，那就是如何在浏览器中动态加载 require 的模块。这个问题可以通过 browserify-window-context 这个 npm 包来解决。
什么是 browserify-window-context
browserify-window-context 是一个用来实现动态加载 require 的模块的 npm 包。通过这个包，我们可以在浏览器中动态加载 require 的模块，而不用打包所有的模块进去。
如何使用
使用 browserify-window-context 非常简单，只需要在浏览器中引入 browserify-window-context.js，然后使用 BrowserifyWindowContext.create() 方法就可以创建一个能够动态加载 require 的模块的上下文对象。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- --------------
-------
------
------- --------------------------------------------
--------
-- -------
--- ------- - ---------------------------------
-- ----
----------------------------- -------- ------- -
--------
---
---------
-------
-------上面的代码中，我们先引入 browserify-window-context.js，然后使用 BrowserifyWindowContext.create() 方法创建了一个能够动态加载 require 的模块的上下文对象。接下来，我们使用上下文对象的 require 方法加载了 ./hello.js 模块，并在加载完毕后执行了其中的 hello 函数。
实现原理
browserify-window-context 的实现原理非常简单，它会在全局对象中创建一个 __browserify_window_context__ 对象，在这个对象中存储了所有的模块内容。当调用 context.require 方法时，它会从 __browserify_window_context__ 对象中获取对应的模块内容，并且调用 eval 方法将模块内容解析成 JavaScript 代码并执行。
小结
browserify-window-context 是一个非常有趣的 npm 包，它可以使我们在浏览器中动态加载 require 的模块，从而减小了打包文件的体积。在使用 browserify 的过程中，如果遇到了动态加载模块的需求，不妨尝试一下 browserify-window-context。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50fa