app.html.eex的相关部分

Question

我有一个接近香草的Phoenix设置，我想在其中使用select2 [1]。我有通过bower配置的bootstrap和jquery。前端是Bootstrap 4，它运作良好，因此已涵盖。请参阅下面的我的凉亭配置。

我尝试的步骤如下。

我已经从select2网站上以HTML创建了一个最小的工作示例，并通过CDN包含了js和css。所有这些都有效。
我已使用select2通过npm安装了npm install --save select2。
我已验证我的http://localhost:8000/js/app.js中存在select2数据。
我已在选项列表中添加了执行select2所需的脚本（请参见下文）。我已将其添加到我的app.js导入下面。

当我导航到该页面时（主页上有最少的工作示例），我在控制台中看到此错误：

jQuery.Deferred exception: $(...).select2 is not a function @http://0.0.0.0:4000/:85:9
mightThrow@http://0.0.0.0:4000/js/app.js:7638:21
resolve/</process<@http://0.0.0.0:4000/js/app.js:7706:12
 undefined jquery.js:3822
[Show/hide message details.] TypeError: $(...).select2 is not a function[Learn More]

我承认，我不知道这一切如何工作，因为我的知识都集中在与后端相关的任务上。整个代码库也位于github [2]上。

任何帮助将不胜感激。

app.html.eex的相关部分

   <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
   <script>
   $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
   </script>

HTML添加到layout.html.eex

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
      javascripts: {
          joinTo: "js/app.js"
      },
      stylesheets: {
          joinTo: "css/app.css",
          order: {
              after: ["css/app.css"] // concat app.css last
          }
      },
      templates: {
          joinTo: "js/app.js"
      }
  },

  conventions: {
      assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
      // Dependencies and current project directories to watch
      watched: ["static", "css", "js", "vendor", "scss", "fonts"],
      // Where to compile files to
      public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
      babel: {
          // Do not use ES6 compiler in vendor code
          ignore: [/vendor/]
      },
      sass: {
          native: true,
          options: {
              includePaths: ["node_modules/bootstrap/scss", "node_modules/font-awesome/scss"], // Tell sass-brunch where to look for files to @import
              precision: 8 // Minimum precision required by bootstrap-sass
          }
      },
      copycat: {
        "fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
        verbose : false, //shows each file that is copied to the destination directory
        onlyChanged: true //only copy a file if it's modified time has changed (only effective when using brunch watch)
      }
  },

  modules: {
      autoRequire: {
          "js/app.js": ["js/app"]
      }
  },

  npm: {
      enabled: true,
      globals: {
          select2: 'select2',
          $: 'jquery',
          jQuery: 'jquery',
          Tether: 'tether',
          Popper: "popper.js",
          bootstrap: 'bootstrap'
      }
  }
};

[1] https://select2.org/ [2] https://github.com/m1dnight/gymlog/tree/frontend_crap

Bower对外部JavaScript的依赖

app.html.eex的相关部分

HTML添加到layout.html.eex

brunch-config.js

0 个答案: