Question

我有一个我在本地构建的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

Answer 1

确保Flask项目结构按Flask documentation包含static文件夹。

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

用于为每个Flask应用程序提供JS服务的Webpack

1 个答案: