如何使用Flask提供NPM包？

Question

我有一个小的Flask应用，现在它是从外部服务器获取jQuery和highlight.js这两个库。我想把它们变成本地依赖，也就是通过NPM来引入。

这样做的标准做法是什么呢？我应该在和我的static和templates文件夹同一个目录下创建一个package.json文件，然后把node_modules作为一个单独的静态目录来提供吗？就像这个问题里提到的那样？

我正在使用pip来打包和分发我的应用，所以任何解决方案都需要和这个兼容。

Answer 1

可能这个回答来得有点晚，但最简单的方法就是这样做：

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

然后你填写提示信息，就会生成几个新文件：

• bower.json：这是由bower生成的，用来管理项目中的依赖关系。使用 bower install -S (你的依赖) 可以更新这个文件，添加你新的依赖。
• package.json：这是npm创建的，用来管理你的项目和npm的依赖。
• node_modules：这里面是你通过npm安装的所有东西。
• bower_components/：这里存放的是你所有前端的依赖。

Answer 2

你需要用到Bower，而你已经有了NPM。这就是你实现目标所需的一切。

简单来说，你需要在项目的根目录下创建一个package.json文件，用NPM来安装Bower。接着，你还需要创建一个bower.json文件，来定义你需要哪些库，比如jQuery。

接下来的步骤是这样的：

npm install
bower install

这样就会为你安装Bower，以及你在bower.json中定义的其他前端库。

所有的Bower组件会被放在一个叫bower_components的文件夹里，这个文件夹就在你的项目根目录下。你安装的所有Bower包都会在这里。现在你可以在你的模板中使用这些包了。

另外，可以看看这个链接，确保Bower的包被安装在你想要提供的static或assets文件夹里。

Answer 3

去你的静态文件夹，在那里初始化你的npm项目。

cd flask_app/static
$ npm init

安装并保存npm包后，你可以这样来使用它们：

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

感谢来源: https://codeburst.io/creating-a-full-stack-web-application-with-python-npm-webpack-and-react-8925800503d9