【问题标题】:Webpack for serving JS per Flask Application用于为每个 Flask 应用程序提供 JS 的 Webpack
【发布时间】:2018-03-26 22:42:48
【问题描述】:

我有一个我在本地构建的 Flask 应用程序,并且因为我正在使用 REST API 并在每个应用程序中使用 jQuery,所以我无法使用带有 npm 包的 javascript。我遵循了here 的建议并让 Webpack 正常工作。

我运行了命令npm run watch

    webpack --progress -d --config webpack.config.js --watch

  0% compiling
Webpack is watching the files…

Version: webpack 2.1.0-beta.21
Time: 4836ms

    Asset     Size  Chunks             Chunk Names

bundle.js  5.97 MB       0  [emitted]  main
[366] ./js/index.js 15.3 kB {0} [built]
   + 366 hidden modules

所以现在我让 webpack 处理我的 index.js 文件,并且我在 5000 上使用 gunicorn 和 Docker 为 Flask 应用程序提供服务。

一切正常,但我的 JS 在我的 Flask 应用程序中仍然没有响应。

有谁知道我做了什么让我的 index.js 文件在这个 Flask 应用程序中使用我拥有的这些组件,或者我在这里做错了什么?

这是我的 html 模板,渲染得很好。只是没有任何 Javascript:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
          content="{% block meta_description %}{% endblock %}">

    <title>{% block title %}{% endblock %}</title>

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='styles/vendor/bootstrap.min.css') }}">
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='styles/main.css') }}">

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='styles/style.css') }}">

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='styles/watson.css') }}">

    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='styles/vendor/font-awesome.min.css') }}">

    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
                  data-toggle="collapse" data-target="#navbar"
                  aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="{{ url_for('page.home') }}">
          </a>
        </div>
      </div>
    </nav>

    <main class="container">
      <div class="md-margin-top">{% block heading %}{% endblock %}</div>
      {% block body %}{% endblock %}
    </main>

    <footer class="footer text-center">
      <div class="container">
        <ul class="list-inline">
          <li class="text-muted">2018</li>
          <li><a href="{{ url_for('page.privacy') }}">NMT</a></li>
          <li><a href="{{ url_for('page.terms') }}">How it works</a></li>
        </ul>
      </div>
    </footer>

    <script
      src="{{ url_for('static', filename='scripts/vendor/bootstrap.min.js') }}">    
    </script>

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

    <script src="{{ url_for('static', filename='node_modules/watson-developer-cloud/v2.js') }}"></script>


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


  </body>
</html>

问题涉及的部分:https://jsfiddle.net/cgnws2u3/3/

错误日志

我更新了文件路径,现在根据我试图链接到我的项目的 js 文件获取此文件:

Uncaught ReferenceError: require is not defined
at v2-generated.ts:17

【问题讨论】:

  • 能否提供 Flask 应用和浏览器日志?
  • 嘿@Alex,是的,我添加了它们。
  • 只发生在JS文件上吗?您在请求 CSS 文件时会看到相同的错误 (404) 吗?
  • 您能提供webpack.config.js吗?

标签: python node.js flask npm webpack


【解决方案1】:

确保您的 Flask 项目结构包含 static 文件夹,符合 Flask documentation

根据index.html模板中的相对bundle.js文件路径,你的static目录应该包含js目录。确保在使用 webpack 后将其保存在那里,它包含您的 bundle.jsindex.js 以及模板中提到的其余文件。

【讨论】:

  • 是的。也许因为这不起作用,可能需要尝试 Browserify。
猜你喜欢
  • 1970-01-01
  • 2018-08-17
  • 2018-10-17
  • 1970-01-01
  • 2020-05-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-09-18
相关资源
最近更新 更多