Javascript 名称可变的网页包需要

Javascript 名称可变的网页包需要,javascript,node.js,reactjs,webpack,Javascript,Node.js,Reactjs,Webpack,我正在编写一个带有功能模块的nodejs/react应用程序,理想情况下可以通过configuration.json文件打开和关闭这些功能模块。功能模块有一个入口点,用于为其请求建立服务器端路由,另一个入口点用于在React中建立客户端路由 服务器端配置工作正常。在服务器启动时,它会检查配置设置,加载适当的模块,并调用其register()函数,以注册其服务器端路由、控制器等。但是,当尝试将此捆绑包打包以部署到客户端时,我在尝试迭代要包含的模块列表时遇到问题,并将其网页打包到正在部署的捆绑包中

我正在编写一个带有功能模块的nodejs/react应用程序,理想情况下可以通过configuration.json文件打开和关闭这些功能模块。功能模块有一个入口点,用于为其请求建立服务器端路由,另一个入口点用于在React中建立客户端路由

服务器端配置工作正常。在服务器启动时,它会检查配置设置,加载适当的模块,并调用其register()函数,以注册其服务器端路由、控制器等。但是,当尝试将此捆绑包打包以部署到客户端时,我在尝试迭代要包含的模块列表时遇到问题,并将其网页打包到正在部署的捆绑包中

到目前为止,我已经做了很多研究,但网页包仍然有点难以浏览。最近的一次尝试是在我的webpack.config.js文件中添加一个部分,将路由预加载到各个模块,将它们包含在捆绑包中,以便在客户端上提供代码,然后通过DefinePlugin将它们的名称粘贴到FEATURE_modules全局变量中,并检查React中是否存在这些路由,尝试在模块进入浏览器后加载并注册()这些模块

到目前为止,代码似乎已添加到捆绑包中,并且模块路径已在该全局变量中正确地传递给客户端,但如果试图在客户端上要求()这些路径,则会抛出一个关于找不到模块的错误,很可能是因为webpack正在将模块名称替换为用于查找映射的数字


我也遇到过关于require.context和能够RegExp这些东西的东西,但这就是我开始迷路的地方。有人能给我举个例子或链接到更容易消费的东西,来演示如何做到这一点吗?

不是100%清楚你在做什么(如果上面没有帮助,也许你可以发布细节),但一般指导原则:

  • Webpack将解析它在代码中看到的任何require();它是一个静态解析器,不是很“聪明”。因此,传统的条件逻辑无法解决您的问题,因为所有的需求都会被解析
  • 如果您的条件检查布尔变量(通常通过Define插件定义),webpack解析器将理解它们,并且只有通过条件检查的需求才会被解析。然后,您可以使用Uglify插件的死代码消除来消除不需要的条件逻辑
  • “动态”requires通常是个坏主意,因为它们会导致webpack捆绑所请求目录中的每个文件(因为它无法确定您在构建时需要哪个文件)。如果您要求的是不存在的东西,那么您可能会得到运行时错误(构建时错误显然更可取)
以上内容将为您提供所需的一切。在requires中用数字替换文件路径是webpack运行时的工作方式,因此,如果这是一个问题,那么您可能正在以错误的方式进行操作


如果您必须通过define插件定义太多的标志,和/或设置太多的条件逻辑——这些是独立的构建吗?使用单个网页包配置文件设置多个构建以及在它们之间重用共享配置非常容易。

不是100%清楚您正在做什么,这会造成问题(如果上面没有帮助,也许您可以发布具体信息),但一般指导原则:

  • Webpack将解析它在代码中看到的任何require();它是一个静态解析器,不是很“聪明”。因此,传统的条件逻辑无法解决您的问题,因为所有的需求都会被解析
  • 如果您的条件检查布尔变量(通常通过Define插件定义),webpack解析器将理解它们,并且只有通过条件检查的需求才会被解析。然后,您可以使用Uglify插件的死代码消除来消除不需要的条件逻辑
  • “动态”requires通常是个坏主意,因为它们会导致webpack捆绑所请求目录中的每个文件(因为它无法确定您在构建时需要哪个文件)。如果您要求的是不存在的东西,那么您可能会得到运行时错误(构建时错误显然更可取)
以上内容将为您提供所需的一切。在requires中用数字替换文件路径是webpack运行时的工作方式,因此,如果这是一个问题,那么您可能正在以错误的方式进行操作


如果您必须通过define插件定义太多的标志,和/或设置太多的条件逻辑——这些是独立的构建吗?使用一个网页包配置文件设置多个构建非常容易,并且可以在它们之间重用共享配置。

感谢您的回复。我最终解决了这个问题,运行了一个预处理脚本来计算这些动态需要的内容,并将它们作为静态需要的模块输出到自己的js文件中,这些模块将导出到一个数组中供我迭代。这是我希望避免的一个额外步骤,但现在还可以,直到我能想出如何正确使用webpack,或者想出另一种方法来处理我的情况。谢谢你的回复。我最终解决了这个问题,运行了一个预处理脚本来计算这些动态需要的内容,并将它们作为静态需要的模块输出到自己的js文件中,这些模块将导出到一个数组中供我迭代。这是我希望避免的一个额外步骤,但现在还可以,直到我能想出如何正确使用webpack,或者想出另一种方法来处理我的情况。