如何使用 Flask 提供 NPM 包？答案

【问题标题】：How can I serve NPM packages using Flask?如何使用 Flask 提供 NPM 包？
【发布时间】：2014-08-22 06:56:21
【问题描述】：

我有一个small Flask app，它目前从外部服务器获取 jQuery 和 highlight.js。我想通过 NPM 获取这些本地依赖项。

这方面的标准做法是什么？我是否应该在与static 和templates 目录相同的目录中创建package.json 文件并将node_modules 作为单独的静态目录提供question？

我正在使用 pip 打包和分发我的应用程序，因此任何解决方案都需要与之兼容。

【问题讨论】：

你见过fantastic吗？这不是 JS 包管理中的最后一句话（就像 webjars，我认为它还不是 100%），但它可能会让事情变得更容易。
@SeanVieira，好建议！包 flask_fanstatic (pypi.org/project/Flask-Fanstatic) 使它更容易。另外，不需要很多包管理器，只需要 pip 就可以了。

【解决方案1】：

转到您的静态文件夹并在那里初始化您的 npm 项目。

cd flask_app/static
$ npm init

安装并保存 npm 包后，您可以像这样为它们提供服务：

<script src="{{ url_for('static', filename='node_modules/toastr/toastr.js')}}"></script>

【讨论】：

像您一样执行
@BruceWayne 使用 url_for 允许您将您的真实项目结构与 Flask 提供的实际静态端点分开。您可以在这个问题中获得更多信息：stackoverflow.com/questions/27234593/… 请参阅 Flask 文档也建议这样做：flask.pocoo.org/docs/1.0/patterns/jquery/#loading-jquery
只要前端库和技术随风而变...这肯定是最好的答案，因为现在 Bower 已被弃用...

【解决方案2】：

您需要Bower，并且您已经拥有 NPM。这就是实现您想要的一切所需的一切。

基本上，您必须在根目录中创建一个package.json 才能使用 NPM 安装 Bower。然后你必须创建一个bower.json 来定义你需要的所有库，例如 jQuery。

那么你的流程会是这样的：

npm install
bower install

这基本上会为您和您在 bower.json 中定义的其他前端库安装 bower。

所有 Bower 组件都将进入根目录中名为 bower_components 的目录。这是所有已安装的 Bower 软件包所在的位置。您现在可以在模板中使用这些包。

还有see this 以确保bower 的软件包安装在您要提供的static 或assets 文件夹中。

【讨论】：

我的问题的答案基本上是“你听说过鲍尔吗”。 :)
这不是问题的好答案。一些包，比如 angular2，不支持 bower，只支持 NPM，所以在开发过程中如何让 Flask 提供 node_modules 仍然需要一个答案
这个答案在 2014 年可能是正确的，但在 2018 年你真的不应该再使用 Bower，该项目已被弃用，将来可能会在某个地方停止运行。如@a2k 的回答所示，使用package.json 和npm。
Bower 不再是东西，所以我改变了接受的答案。

【解决方案3】：

答案可能有点晚，但最简单的方法是这样做：

sudo npm install bower
echo "bower_components/" >> .gitignore
bower install -S (here goes whatever you want)
npm init

然后你填写提示，你会有几个新文件：

bower.json，由 bower 生成，用于管理依赖关系。使用 bower install -S (your dependency) 将更新此文件您的新依赖项。
package.json，由 npm 创建，用于管理您的项目和 npm 依赖关系
node_modules，你用 npm 安装的东西
bower_components/ 这是您所有前端依赖项的位置直播。

【讨论】：