使用像 requireJs 这样的 webpack 扩展应用程序
Extend an application with webpack like requireJs
现有应用程序:
我的应用程序正在使用 require.js。
我的应用程序的好处是其他人可以通过使用 require.js
编写第三方插件来扩展我的应用程序
例如:(第3方插件注册)
// 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 作为起始文件)。第三方插件如何像上面的例子一样即时工作?
Please note that after I compile my application, it does not include third party source as they can be fetched on the fly with requriejs
是的,就是这个问题。
我的情况与您的情况类似,我的一个大型应用程序编写为 AMD 模块的集合,可以在 运行 时加载编辑模式,这也是 AMD 模块。这些模式通常不与应用程序捆绑在一起。
AFAIK 不可能复制 only with Webpack 做 RequireJS 的等价物的可能性 require([a])
其中 a
是一个变量值在构建时无法得知,但在 运行 时确定。 (为了可能不熟悉 RequireJS 的读者的利益,我要补充一点,是的,我的意思是第一个参数是 [a]
而不仅仅是 a
。RequireJS 区分了两个。)
Webpack 需要在构建时知道它将把哪些模块捆绑在一起。 ("Needs to know" 意味着它需要知道名称 和 才能找到模块的来源。)所以它不支持动态加载只有在 运行 才知道的模块时间。如果您阅读文档或教程,您将 运行 讨论使用 Webpack 进行动态加载,但这些内容不允许执行与 require([a])
情况相同的操作。 Webpack 可以将 bundle 拆分为块并根据需要加载块,但要使其正常工作,Webpack 仍然需要提前知道它需要的整个模块集。 这不允许在 运行 时加载构建时未知的模块。 还有 require.context
,但它允许您在 [=38] 时确定=] time 你想要哪个特定模块,模块来自哪个集合是在构建时确定的。如果在构建时您知道您将使用 A、B、C 之一,那很好。但是,如果您在构建时不知道模块的名称,或者无法将其源代码提供给 Webpack,那您就不走运了。
也就是说,应该可以使用 Webpack 构建您的应用程序的核心,并让该核心执行对模块加载器(如 RequireJS 或 SystemJS)的直接调用。这是我自己的应用程序正在进入的方向,但我还没有跨过那座桥。
现有应用程序: 我的应用程序正在使用 require.js。 我的应用程序的好处是其他人可以通过使用 require.js
编写第三方插件来扩展我的应用程序例如:(第3方插件注册)
// 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
请注意,在我编译我的应用程序后,它不包含第三方源,因为它们可以使用 requriejs 即时获取
问题: 我一直在研究 webpack,因为它会在分发之前编译所有内容(bundle.js 作为起始文件)。第三方插件如何像上面的例子一样即时工作?
Please note that after I compile my application, it does not include third party source as they can be fetched on the fly with requriejs
是的,就是这个问题。
我的情况与您的情况类似,我的一个大型应用程序编写为 AMD 模块的集合,可以在 运行 时加载编辑模式,这也是 AMD 模块。这些模式通常不与应用程序捆绑在一起。
AFAIK 不可能复制 only with Webpack 做 RequireJS 的等价物的可能性 require([a])
其中 a
是一个变量值在构建时无法得知,但在 运行 时确定。 (为了可能不熟悉 RequireJS 的读者的利益,我要补充一点,是的,我的意思是第一个参数是 [a]
而不仅仅是 a
。RequireJS 区分了两个。)
Webpack 需要在构建时知道它将把哪些模块捆绑在一起。 ("Needs to know" 意味着它需要知道名称 和 才能找到模块的来源。)所以它不支持动态加载只有在 运行 才知道的模块时间。如果您阅读文档或教程,您将 运行 讨论使用 Webpack 进行动态加载,但这些内容不允许执行与 require([a])
情况相同的操作。 Webpack 可以将 bundle 拆分为块并根据需要加载块,但要使其正常工作,Webpack 仍然需要提前知道它需要的整个模块集。 这不允许在 运行 时加载构建时未知的模块。 还有 require.context
,但它允许您在 [=38] 时确定=] time 你想要哪个特定模块,模块来自哪个集合是在构建时确定的。如果在构建时您知道您将使用 A、B、C 之一,那很好。但是,如果您在构建时不知道模块的名称,或者无法将其源代码提供给 Webpack,那您就不走运了。
也就是说,应该可以使用 Webpack 构建您的应用程序的核心,并让该核心执行对模块加载器(如 RequireJS 或 SystemJS)的直接调用。这是我自己的应用程序正在进入的方向,但我还没有跨过那座桥。