有没有办法让JS引擎加载.js文件而不显式导入它？

Question

也许我正在尝试做一些愚蠢的事情,但我有一个Web应用程序(Angular2 +),我正在尝试以可扩展/模块化的方式构建它.特别是,由于缺乏更好的术语,我有各种各样的模块,我希望能够包括或不包括,具体取决于所需的部署类型.这些模块包括通过扩展基类实现的各种功能.

为了简化事情,想象有一个GenericModuleDefinition类,有两个模块 - ModuleOne.js和ModuleTwo.js.第一个定义ModuleOneDefinitionClass并实例化导出的实例ModuleOneDefinition,然后将其注册到ModuleRegistry.第二个模块做了类似的事情.

(要清楚 - 它会在运行文件时注册ModuleXXXDefinition对象(例如,由于其他一些.js文件导入其中一个导出).如果没有运行,那么显然什么都没有注册 - 这就是问题我正如我在下面描述的那样.ModuleRegistryModuleXXX.js

在ModuleRegistry有一些方法,将遍历所有的模块,并调用它们各自的方法.在此示例中,可能有一个ModuleRegistry.initAllModules()调用的initModule()方法,然后在每个已注册的模块上调用该方法.

在启动时,我的应用程序(例如,在index.js)调用ModuleRegistry.initAllModules().显然,因为index.js导入导出的ModuleRegistry符号,这将导致ModuleRegistry.js代码被拉入,但由于没有显式引用两个Module .js文件中的任何一个的导出,因此这些文件不会被拉入,并且所以ModuleOneDefinition和ModuleTwoDefinition对象不会被实例化并注册ModuleRegistry- 所以调用initAllModules()将是徒劳的.

显然,我可以ModuleDefinition在我的这些对象中添加无意义的引用index.js,这会强制它们被拉入,以便它们在我调用时注册initAllModules().但这需要对index.js文件进行更改,具体取决于我是否要使用ModuleTwo或不使用ModuleTwo进行部署.我希望仅仅存在ModuleTwo.js足以导致文件被拉入并由此ModuleTwoDefinition得到注册的文件ModuleRegistry.

有没有一种标准的方法来处理这种情况？我不得不编辑一些全局文件(index.js它引用的任何一个或其他文件),以便它有关于所有包含的模块的信息,以便它可以去加载它们？或者是否有一种聪明的方法可以让JavaScript执行目录中的所有.js文件,这样只需复制文件即可让它们在启动时加载？

Answer 1

要在特定条件下使用 Angular 服务执行更多操作并附加静态 js 文件，您应该使用webpack我在这里看到的第一个选项是弹出您的 webpack 配置，之后您可以指定 Angular 应该加载或不加载哪些内容。

说到这里，我举一个例子：

对于您想要包含的任何外部 javascript 文件，您必须将它们放入angular cli文件的数组中。但是您无法控制应包含哪个文件以及不包含哪个文件。ng servescriptsangular-cli.json

通过使用webpack配置，您可以通过将标志从终端传递到文件来指定所有这些内容webpack config，并在那里执行所有过程。

例子：

var env.commandLineParamater, plugins;
if(env.commandLineParamater == 'production'){
plugins = [
        new ScriptsWebpackPlugin({
      "name": "scripts",
      "sourceMap": true,
      "filename": "scripts.bundle.js",
      "scripts": [
        "D:\\Tutorial\\Angular\\demo-project\\node_moduels\\bootstrap\\dist\\bootstrap.min.js",
        "D:\\Tutorial\\Angular\\demo-project\\node_moduels\\jquery\\dist\\jquery.min.js"
      ],
      "basePath": "D:\\Tutorial\\Angular\\demo-project"
    }),
]}else{
plugins = [
        new ScriptsWebpackPlugin({
      "name": "scripts",
      "sourceMap": true,
      "filename": "scripts.bundle.js",
      "scripts": [
        "D:\\Tutorial\\Angular\\demo-project\\node_moduels\\bootstrap\\dist\\bootstrap.min.js"
      ],
      "basePath": "D:\\Tutorial\\Angular\\demo-project"
    }),
]
}

然后：

module.exports = (env) => {
    "plugins": plugins,
    // other webpack configuration
}

该script.js捆绑包将在主应用程序捆绑包之前加载，因此您可以控制在运行npm run start而不是运行时加载的内容ng-serve。

要弹出 webpack 配置，请使用ng eject.

一般来说，当您需要控制一些角度ng-serve工作时，您应该提取自己的 webpack 配置并根据需要进行自定义。