将 js 应用程序与 webpack 捆绑为 wordpress 插件答案

【问题标题】：Bundle js apps with webpack for a wordpress plugin将 js 应用程序与 webpack 捆绑为 wordpress 插件
【发布时间】：2016-02-22 21:29:54
【问题描述】：

我正在开发一个 WordPress 插件，它在很大程度上依赖于管理端的 javascript。因为它是一个插件并且在管理面板上工作我必须小心防止与其他插件的 js 代码发生任何冲突，因为它就像一个普通的地方，每个插件都可以加载 js 库。

我计划使用 wordpress 的默认 js 脚本（如 jQuery、下划线、jquery-ui 等）作为外部和捆绑其余依赖项（react、redux、numeric.js 等）与 webpack。

这种方式会不会和其他插件的js代码冲突？

也许，如果；

另一位插件作者决定像我一样使用 webpack。
另一个插件加载了一个 js 库，它已经在我的依赖项列表中，但它是非常旧的版本。

Webpack、browserify 或其他工具或方法可以帮助我防止这种冲突问题吗？

【问题讨论】：

Webpack 将完全保护您的代码免受全局命名空间的影响，前提是您不向诸如 window 之类的内置对象添加任何您可能不会做的事情。

标签： javascript wordpress reactjs webpack browserify

【解决方案1】：

您通过 webpack 捆绑的任何内容，包括 webpack 运行时本身，都不会全局公开。您可以捆绑您自己的 jQuery（例如，您显然在使用 WordPress）并与现有的一起安全地使用它，并且两者都不会出现问题。你甚至可以加载多个 webpack 构建而不会发生冲突（它们会“不知道”彼此）。 Webpack 将其所有代码包装在一个立即调用的函数中，因此所有内容都在该函数的本地范围内。因此，除非您明确地将某些东西设为全局，否则不会有冲突的风险。

【讨论】：

在主题和几个插件使用 webpack 打包东西的场景下怎么办。所有这些插件/主题之间没有一定的开销会增加页面加载的权重吗？
@corradomatt webpack 本身增加的开销可以忽略不计。插件/主题使用的唯一共享资源是共享的 js 库。如果这是一个问题，您可以单独加载它们并配置 webpack 以将它们视为“外部”依赖项。在这种情况下，它不会尝试捆绑它们，而是希望它们在运行时定义。
如果一个 js 库是由一个插件注册的，但主题或另一个插件（也使用 webpack）希望能够使用它/在它的 javascript 中调用它怎么办？我可以将 webpack 包名称作为主题中的外部库引用，并让它从注册它的插件中加载该 JS 吗？
@corradomatt 您不能从捆绑包外部使用 webpack 捆绑包中包含的任何内容，除非该捆绑包的构建方式专门公开了 JS 以供周围页面使用（这是由将 webpack 配置中的 'target' 选项设置为 'library'）。所以换句话说，插件的 JS 必须在构建时考虑到这一点，以允许其他 JS 使用它。如果不是，那么无论如何尝试使用它都是不可取的；您不想依赖仅供内部使用的代码。