node.js - 如何将 "node_modules"使用的 "webpack-node-externals"复制到生产建筑目录？

Question

考虑使用 NodeJS 后端的全栈应用程序项目。

• package.json 包含两个 前端的依赖项(如vue、vuex 等)和后端(如 body-parser、express 等)。
• 前端入口点 (EntryPoint-FrontEnd.js) 和后端入口点 (EntryPoint-BackEnd.js) 由不同的 Webpack 配置构建；主要区别在于 webpack-node-externals 的用法和 target: "node" 作为后端。
• 前端的依赖项被捆绑到 EntryPoint-FrontEnd.js，但是 EntryPoint-BackEnd.js 访问依赖项 webpack-node-externals。

现在:如何仅将那些使用 EntryPoint-BackEnd.js 的依赖项复制到 02-ProductionBuildwebpack-node-externals?

如果可以通过 webpack-node-externals 达到它我很高兴，但如果不能，欢迎使用其他工具。

基本做法是通过 npm install 将整个项目部署到主机并安装依赖项。然而，我们在服务器中运行应用程序所需的只是 02-ProductionBuild 文件夹，其中包括 EntryPoint-BackEnd.js 的依赖项。

Answer 1

问题根源

• 您有多个应用程序的一个存储库
• 您在一个文件中集中了前端和后端依赖项:package.json

解决方法

• 创建一个 npm 模块，该模块能够为存储库中的每个应用程序创建一个 package.json。虚构名称:packagify
• 在您的 package.json 中添加脚本以执行单独的构建

    {
      "build:frontend" : "packagify ....",
      "build:backend" : "packagify ...."
    }

• 如果您不想以优雅的方式创建新的 npm 库，您可以创建一个简单的 packagify.js 文件并从您的脚本中调用它:

    {
      "build:frontend" : "packagify.js ....",
      "build:backend" : "packagify.js ...."
    }

一些建议

• 不要将多个应用程序合并到一个源代码存储库中。每个应用程序必须有自己的源代码库
• 将您当前的存储库拆分为两个存储库:一个用于前端，一个用于后端
• 如果每个应用程序都有自己的源代码存储库，那么构建或部署它们就不会有问题。这叫做:独立部署
• 如果您的组织要发展壮大，您可以避免使用微前端的新单体

单体前端

既然你用的是vue，那你的后端肯定是rest api。因此，您接近于与单体应用程序相反的经典方法。

一个单体特征:

• 前端和后端源代码在同一个仓库

但是，如果您将数十个网络功能放在同一个网络应用程序中会怎样？一个新的怪物诞生了:

微前端和微服务

总结一下，microfronted 与微服务相同，但用于前端

您应该已经知道，微服务有很多优势。这些优势也适用于微前端。其中最重要的一项是:独立部署

独立部署

与微服务一样，微前端的独立部署能力是关键。这缩小了任何给定部署的范围，进而降低了相关风险。

在你的情况下，

检查这些链接；

• https://micro-frontends.org/
• https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16
• https://martinfowler.com/articles/micro-frontends.html