使用像requireJs这样的webpack扩展应用程序

时间:2017-10-10 04:51:21

标签: javascript jquery webpack requirejs

现有应用 我的应用程序正在使用require.js。 我的应用程序的好处是其他人可以通过使用require.js

编写第三方插件来扩展我的应用程序

例如:(第三方插件注册) // registering a new plugin { url:'#new-page-url', js:'plugin-folder/new-page-url.js' } 因此,当任何地方遇到#new-page-url时,requirejs将使用plugin-folder/new-page-url.js

中的js文件

请注意,在我编译我的应用程序后,它不包含第三方来源,因为它们可以通过requriejs动态获取

问题: 我一直在研究webpack,因为它在发布之前编译了所有内容(bundle.js作为起始文件)。如上例所示,第三方插件如何在飞行中工作?

1 个答案:

答案 0 :(得分:3)

  

请注意,在我编译我的应用程序后,它不包含第三方来源,因为它们可以通过requriejs动态获取

是的,这就是问题所在。

我处于类似于你的情况,我的大型应用程序作为AMD模块的集合编写,可以在运行时加载编辑模式,这也是AMD模块。这些模式通常不与应用程序捆绑在一起。

AFAIK无法仅使用Webpack复制 可能会执行相同的RequireJS' require([a])其中a是一个变量,其值在构建时无法知道,但在运行时确定。 (为了让那些可能不熟悉RequireJS的读者受益,我会补充说是的,我的意思是第一个参数是[a],而不只是a。RequireJS有所区别两者之间。)

Webpack需要在构建时知道它将捆绑在一起的模块。 ("需要知道"意味着它需要知道名称​​和找到模块的来源。)因此它不支持动态加载只能被人知道的模块在运行时。如果您阅读文档或教程,您将讨论使用Webpack进行动态加载的讨论,但这些不允许执行等同于require([a])的情况。 Webpack可以将bundle拆分成块并根据需要加载块,但为了实现这一点,Webpack仍然需要提前知道它将需要的整个模块集。 这不允许在运行时加载构建时未知的模块。还有require.context,但它允许您在运行时确定哪个特定的您想要的模块,模块来自的集合在构建时确定。如果在构建时你知道你将使用A,B,C中的一个,那很好。但是,如果您在构建时不知道模块的名称,或者无法将其源代码提供给Webpack,那么您运气不佳。

话虽这么说,应该可以使用Webpack构建应用程序的核心,并让这个核心执行对RequireJS或SystemJS等模块加载器的直接调用。这是我用自己的应用程序进入的方向,但我还没有越过那座桥。