Question

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

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

（要清楚 - 当ModuleXXXDefinition文件运行时，它会将ModuleRegistry对象注册到ModuleXXX.js（例如，由于某些其他.js文件导入其中一个导出）。如果它没有运行，那么显然什么都没有注册 - 这就是我遇到的问题，正如我在下面所描述的那样。）

ModuleRegistry有一些方法可以迭代所有模块并调用它们各自的方法。在此示例中，可能有一个名为ModuleRegistry.initAllModules()的方法，然后在每个已注册的模块上调用initModule()方法。

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

显然，我可以对我ModuleDefinition中的每个index.js对象进行无意义的引用，这会强制它们被拉入，以便在我调用时initAllModules()注册它们。 1}}。但这需要更改index.js文件，具体取决于我是否要使用ModuleTwo或不使用ModuleTwo进行部署。我希望只有ModuleTwo.js的存在足以导致文件被提取，结果ModuleTwoDefinition才能注册ModuleRegistry。

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

Answer 1

一种聪明的方法，可以使xx JavaScript xx Node.js执行目录中的所有.js文件：

var fs = require('fs')  // node filesystem 
var path = require('path') // node path 

function hasJsExtension(item) {
  return item != 'index.js' && path.extname(item) === '.js'
}

function pathHere(item) {
  return path.join('.', item)
}

fs.readdir('./', function(err, list) {
  if (err) return err
  list.filter(hasJsExtension).map(pathHere).forEach(require) // require them all
})

Angular非常不同，如果是服务员检查你的应用是否需要一个模块，如果是这样，那么在任何需要的时候服务相应的js文件，而不是在第一次加载时。

实际上你的情况让我想起了带有头文件声明的C ++和带有实现的cpp文件，也许你只需要在initAllModules之前使用一个defineAllModules函数。

另一种方法可能是考虑找出如何从ng-serve中排除这些模块，并将它们作为HTML中的脚本包含在其他模式之前，它们将被定义（如果存在，因此，服务），并通过angular调用如果需要，唯一的问题是控制台中的错误，如果没有提取一个脚本标记，但是你的应用程序无论如何都会工作，如果它应该这样做。

但无论如何，它将声明 /在ng-serve和HTML中的某个地方定义这些模块。

在您自己的特殊情况中，并且不愿意低估ng-serve，但是您的应用的总js是否太重而无法立即投放？（缩小和所有...），因为 good-to-go 解决方案可能是从dev js文件夹中随意构建和重建生产all.js的众多工具之一，或者就像你说的那样，你的文件夹中有拖放。

此类工具同样是服务器端，但即使你只能推送/ FTP你的javascript，你也可以在你喜欢的开发环境中使用它，只需推送你的新版本。要查看此类工具的列表，请访问Google YourDevEnvironment 捆绑 javascript'。

Answer 2

要使用角度服务并在特定条件下附加静态js文件，您应该使用from urllib.request import urlopen as Req from bs4 import BeautifulSoup as souce start_url='https://www.ebay.de/sch/i.html?_fosrp=1&_from=R40&_nkw=iphone&_in_kw=1&_ex_kw=&_sacat=0&_mPrRngCbx=1&_udlo=600&_udhi=4.800&LH_BIN=1&LH_ItemCondition=4&_ftrt=901&_ftrv=1&_sabdlo=&_sabdhi=&_samilow=&_samihi=&_sadis=10&_fpos=&LH_SubLocation=1&_sargn=-1%26saslc%3D0&_fsradio2=%26LH_LocatedIn%3D1&_salic=77&_saact=77&LH_SALE_CURRENCY=0&_sop=2&_dmd=1&_ipg=200' page_urls =[start_url] for purl in page_urls: Client=Req(purl) page_html=Client.read() Client.close() page_soup=souce(page_html, "html.parser") containers_listings = page_soup.findAll("li",{"class":"sresult lvresult clearfix li"}) container_next=page_soup.find("td",{"class":"pagn-next"}) next_url=container_next.a["href"] #this is where you would add your new link if next_url not in page_urls: page_urls.append(next_url) filename="scrape_ebay.csv" f=open(filename,"w") headers="item_title,item_link,item_price\n" f.write(headers) for container in containers_listings: item_title=container.h3.text.strip() item_link=container.h3.a["href"].strip() item_price=container.span.text.strip() f.write(item_title + "," + item_link + "," + item_price.replace(",",".") + "\n") f.close()，因此我在这里看到的第一个选项是弹出您的webpack配置，之后您可以指定应加载的角度

话虽如此，我会举一个例子：

使用webpack和angular cli您要包含的任何外部JavaScript文件，您必须将它们放在ng serve文件中的scripts数组中。但是您无法控制应该包含哪个文件，哪个不包含。

通过使用angular-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时控制加载的内容。

要弹出您的webpack配置，请使用ng-serve。

一般来说，当你需要控制一些有角度的ng eject工作时，你应该提取你自己的webpack配置并根据需要自定义它。

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

2 个答案: