JavaScript 模块和 Web 应用程序插件

Question

我维护一个 (PHP) 网络应用程序，它由一个应用程序核心和几个可以添加到核心的插件组成。应用程序的每个实例都可以有一组自定义插件，具体取决于实例的用途。应用程序核心和插件在各自的存储库中开发。

如果安装了插件，它会将其 JavaScript 注入(inject)到前端的模板中。这可能如下所示:

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

顺序很重要，因为插件可能会使用核心资源或之前注入(inject)的另一个插件的资源。目前，这种资源共享是作为全局范围内的单个变量实现的，它收集由核心和插件“导出”的资源。在插件中，可以通过这个全局变量访问和使用资源:

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。

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

import {resource} from '../../../core/src/main'

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

我想问的是，是否有可能创建一个“知道”核心和插件之间共享变量的构建配置。例如，如果我在核心中定义了一个类 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 是您应用程序的入口点。它使用 plugin1 和 plugin2，并且两者都使用 util1。

ma​​in.js:

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

plugin1.js:

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

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

plugin2.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

index.html:

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

bundle.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.