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文件中吗？这会重复代码。

Clarification:

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

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

每个存储库的代码都是独立构建到一个PHP包中的。最后一个应用程序实例由应用程序核心和几个插件组成，这些插件都是作为PHP包安装的。当安装了JavaScript包时，不会重新构建PHP。

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

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

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

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

Answer 1

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

src:

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

因此，让我们说，主要是你的应用程序的入口点。它使用plugin1和plugin2，两者都使用util1。

main.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捆绑此代码时，它将知道不要重复代码。如果你对它们进行适当的配置，它也会知道要做很多生产质量的事情(而且老实说，在默认情况下，从get开始它也是相当不错的)。结果将进入包和生成的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.

Answer 2

请记住，您有单独的内核和插件的存储库，我建议您为核心和每个插件创建包。

因此，在核心部分，您将使用package.json和"name": "@scope/core"，在plugin1 "name": "@scope/plugin1" e.t.c中。

然后，您将构建所有的软件包，例如webpack，并发布结果或将其放在某个地方。

之后，您可以将es6模块与import语句结合使用。

假设在plugin2中，您需要使用核心特性以及来自plugin1的内容。

// package.json for plugin2
{
  "name": "@scope/plugin2",
  "dependencies": {
    "@scope/core": "1.0.0",
    "@scope/plugin1": "1.0.0"
  }
}

// some javascript in plugin2
import {coreResource} from '@scope/core';
import {p1Resource} from '@scope/plugin1';

如果您不想发布您的代码，那么您可以将它放在本地的某个地方，并在依赖项中引用它，例如

// package.json for plugin2
{
  "name": "@scope/plugin2",
  "dependencies": {
    "@scope/core": "file:/path/to/core",
    "@scope/plugin1": "file:/path/to/plugin1"
  }
}