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

时间:2018-12-30 16:00:37

标签: node.js reactjs npm web-applications

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

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

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

2 个答案:

答案 0 :(得分:2)

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

下面是一个示例,您可以将gulpvendor一起使用,将所有依赖项复制到gulp-npm-dist文件夹中:https://www.npmjs.com/package/gulp-npm-dist

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

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

Karim

答案 1 :(得分: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/