如何在 Web 应用程序中集成外部依赖项答案

【问题标题】：How to integrate external dependencies in a web app如何在 Web 应用程序中集成外部依赖项
【发布时间】：2019-05-27 11:53:21
【问题描述】：

我正在使用 npm、nodejs 和 react 组件编写我的第一个 Web 应用程序。这对我来说都是全新的东西。

我需要将此 Web 应用程序部署在 LAN 中的服务器上。服务器和客户端都无法访问互联网。我按照一些教程来实例化我的第一个 Web 应用程序实现。问题是现在 Web 应用程序通过 CDN 链接（例如在 index.html 中指定）引用库和 css。

我的问题是，是否有一种标准和自动的方式来构建 Web 应用程序，以便构建过程会自动下载所有外部依赖项并将所有来自外部世界的引用转换为本地路径。

【问题讨论】：

我已经更新了我的答案，请检查一下，如果可行，请告诉我。

标签： node.js reactjs npm web-applications

【解决方案1】：

我的问题是，是否有一种标准和自动的方式来构建 Web 应用程序，以便构建过程会自动下载所有外部依赖项并将所有来自外部世界的引用转换为本地路径。

你需要使用像 webpack 这样的模块打包器。

那么基本的应用程序看起来会是这样的：

项目结构：

..
src
    ..
    js
        ..
        <your react files here>
    css
        ..
        <your css files here>
    index.htm
    index.js
package.json
.babelrc
webpack.config.js

index.js

import 'some/library/from/node_modules';
import YourApp from "./js/YourApp.jsx";

因此，您可以将您的 React 应用程序与 css 文件、字体、js 库等捆绑到一个没有外部依赖项的单个文件中，并像静态文件一样由 Node.js 提供。

这是一篇很好的文章：https://www.valentinog.com/blog/react-webpack-babel/

【讨论】：

我阅读了教程。一切都按预期工作，除了一件重要的事情：我的 index.html 模板来自 react-web-app npm。在这个文件里面有元字符串，比如 href="%PUBLIC_URL%/favicon.ico" 或者更标准的 href 指向 cdn 资源，它们由 react-scripts 处理。如何让 webpack 处理这种形式的模板 index.html？
@Martin 将 favicon 路径更改为相对路径，例如 somewhere/favicon.ico，然后您可以通过 Node.js 服务器提供它。关于cdn资源：首先，尝试在npm中找到从cdn下载的库。有很好的机会，他们在那里。然后你可以npm i 他们并导入你的index.js。如果不是，您始终可以手动下载所需的库，并将它们从您的 Node.js 服务器提供给您的应用程序。
我尝试下载引导 css 文件并将其放入 src。在 index.js 我导入它，但现在构建过程抱怨字体没有被正确引用。你知道如何巧妙地解决这个问题吗？ ./src/bootstrap.min.css ModuleNotFoundError：未找到模块：错误：您尝试导入项目 src/ 目录之外的 ../fonts/glyphicons-halflings-regular.eot。不支持 src/ 之外的相对导入。您可以将它移到 src/ 中，或者从项目的 node_modules/ 中添加符号链接。
@Martin 您是刚刚下载它还是通过 npm 安装为节点模块？正如我之前写的，你应该先在 npm 中搜索你需要的库。根据 webpack 的官方引导说明，可以在此处找到：getbootstrap.com/docs/4.0/getting-started/webpack 您应该首先使用npm i bootstrap 安装引导程序，然后使用import 'bootstrap'; 和import 'bootstrap/dist/css/bootstrap.min.css'; 将其包含到您的反应应用程序中 - 用于引导 css。另请检查您是否按照文章中所述将 css-loader 添加到 webpack 配置中。

【解决方案2】：

您可以使用nodejs 来执行此操作。

这是一个示例，您可以使用gulp 将所有依赖项复制到使用gulp-npm-dist 的vendor 文件夹：https://www.npmjs.com/package/gulp-npm-dist

这个包会根据你的package.json自动下载并复制你的vendors。这是最简单的方法，您可以使用此方法轻松更新和管理所有软件包版本。

如果您有任何问题，请告诉我。

卡里姆

【讨论】：