javascript - 如何在早午餐中加载 Foundation 6 JS？

Question

我们想在 Phoenix/Brunch 应用程序中使用 Foundation 6 JS 插件，但我不知道如何正确连接 Foundation 脚本。据我了解，它们应该在 jQuery 之后加载，并使用 .foundation() 函数扩展它。

package.json

"dependencies": {
  "foundation-sites": "^6.2.3",
  "jquery": "^3.1.0",
  "sass-brunch": "^2.6.3",
},

brunch-config.js

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js",
      order: {
        before: [
          "node_modules/jquery/dist/jquery",
          "node_modules/foundation-sites/js/foundation.core",
          "node_modules/foundation-sites/js/foundation.topbar"
        ]
       }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/,
    ignored: [
      /\/_.*/
    ]
  },
  paths: {
    watched: [
      "web/static",
      "test/static"
    ],
    public: "priv/static"
  },

  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/, /web\/static\/elm/]
    },
    eslint: {
      pattern: /^web\/static\/js\/.*\.js?$/
    },
    sass: {
      mode: 'native',
      options: {
        includePaths: [
          'node_modules/foundation-sites/scss'
        ]
      }
    }
  },    

  modules: {
    autoRequire: {
      "jquery":            "node_modules/jquery/dist/jquery",
      "foundation_core":   "node_modules/foundation-sites/js/foundation.core",
      "foundation_topbar": "node_modules/foundation-sites/js/foundation.topbar",
      "js/app.js":         ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "jquery", "foundation-sites", "scrollreveal"],
    globals: {
      $:      'jquery',
      jQuery: 'jquery',
    }
  }
};

Brunch 文档不是很明确，所以我可能会在该配置中犯一些错误(当尝试使用 autoRequire 和 npm.globals 时 - 什么是 map键在那里？)，但是 $ 和 jQuery 全局变量在那里并且指向 jQuery 库，这很好。

问题是 $(document).foundation 未定义。

Answer 1

Brunch 尚未编译 Assets ，因为在“模块”部分中您使用了字符串值:

modules: {
    autoRequire: {
      "jquery":            "node_modules/jquery/dist/jquery",
      "foundation_core":   "node_modules/foundation-sites/js/foundation.core",
      "foundation_topbar": "node_modules/foundation-sites/js/foundation.topbar",
      "js/app.js":         ["web/static/js/app"]
    }
},

相反，您应该使用带有路径的字符串数组。因此，将其更改为:

modules: {
    autoRequire: {
      "jquery":            ["node_modules/jquery/dist/jquery"],
      "foundation_core":   ["node_modules/foundation-sites/js/foundation.core"],
      "foundation_topbar": ["node_modules/foundation-sites/js/foundation.topbar"],
      "js/app.js":         ["web/static/js/app"]
    }
},