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

Question

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

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

我的问题是，是否存在构建Web应用程序的标准且自动的方法，以便构建过程将自动下载所有外部依赖项并将所有引用从外界转换为本地路径。

Answer 1

您可以使用nodejs来做到这一点。

这是一个示例，您可以将其与gulp一起使用，以使用gulp-npm-dist将所有依赖项复制到vendor文件夹中： https : gulp-npm-dist

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

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

卡里姆

Answer 2

我的问题是，是否存在构建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";

这样一来，您便可以将带有CSS文件，字体，js库等的React应用程序捆绑到一个没有外部依赖关系的文件中，并像静态文件一样由Node.js提供服务。

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