JavaScript模块和Web应用程序插件

Question

我维护一个（PHP）Web应用程序，该应用程序由一个应用程序核心和几个可以添加到该核心的插件组成。应用程序的每个实例可以具有一组自定义的插件，具体取决于实例的目的。应用程序核心和插件在各自的存储库中开发。

如果安装了插件，则会将其JavaScript注入前端的模板中。可能如下所示：

<script src="core.min.js"></script>
<script src="plugin-1.min.js"></script>
<script src="plugin-2.min.js"></script>

该顺序很重要，因为一个插件可能会使用核心或先前注入的另一个插件中的资源。当前，这种资源共享在全局范围内被实现为单个变量，该变量收集由核心和插件“导出”的资源。在插件中，可以通过以下全局变量访问和使用资源：

var resource = myapp.core.resource;

现在我的问题是：是否有一种方法可以使用ES6模块（使用Webpack或类似的东西）实现上述内核/插件架构？我想使用一种更现代的方式来开发JavaScript甚至使用TypeScript，但是我不知道是否可以做到这一点。我了解，可以从插件中的核心JavaScript导入一些资源，但是也不能将其编译到插件的JavaScript文件中吗？这将重复代码。

---

澄清：

核心应用程序和插件是在单独的存储库中开发的，例如：

core/src/main.js
plugin-1/src/main.js
plugin-2/src/main.js

每个存储库的代码都独立构建在PHP包中。最终的应用程序实例包括应用程序核心和几个作为PHP软件包安装的插件。安装PHP软件包时，不会重建JavaScript。

我可以在这样的插件中从应用程序核心导入一些资源：

core/src/main.js
plugin-1/src/main.js
plugin-2/src/main.js

但是，这将重复应用程序核心的代码，因为核心和插件是分别构建的。

我要问的是，是否有可能创建一个“知道”核心和插件之间共享变量的构建配置。例如，如果我Main在核心中定义一个类，则可以将其内置到全局变量中myapp.core.Main。如果我随后导入Main其中一个插件，则可以解析为使用变量myapp.core.Main。这就是当前实现的工作方式，但是都是手动定义的。也许像Webpack这样的现代构建工具有一种更聪明的方法。

Answer 1

将模块打包到 中的一般要点bundle.js是，虽然它们在 中折射src，但它们仍然捆绑到 1 个捆绑文件中（有时您出于各种原因将其分成几个）。Webpack 知道不要重复代码，这是它的基础。我举个例子：

源代码：

root/src
root/src/main.js
root/src/plugin1.js
root/src/plugin2.js
root/src/utils/util1.js

所以我们可以说 main 是您应用程序的入口点。它使用plugin1and plugin2，并且两者都使用util1.

main.js：

import plugin1 from './plugin1'
import plugin2 from './plugin2'
//... Do stuff

插件1.js：

import util1 from './utils/util1.js';

export default const plugin1 = ()=>{
  //.. Do stuff also with util1
}

插件2.js：

import util1 from './utils/util1.js';

export default const plugin2 = ()=>{
  //.. Do stuff also with util1
}

util1.js：

export default const util1 = ()=>{
  //.. Do util things
}

当你使用 webpack 捆绑这段代码时，它会知道不要重复代码。如果你正确配置它们，它也会知道做很多生产质量的事情（老实说，默认情况下，它从一开始就非常好）。结果将进入捆绑包以及生成的 index.html 文件（我推荐此方法，因为您可以开始对源名称进行哈希处理并避免更新时出现缓存问题。）或手动文件。

距离：

root/dist/index.html
root/dist/bundle.js

索引.html：

<!-- Would / Should have a script tag for the bundle. -->
<script src="bundle.js">

捆绑.js：

// Here you would get a minified/uglified etc. version of your JS which is optimized according to the config. You will not get code repetition.