如何在早午餐中加载 Foundation 6 JS？答案

【问题标题】：How to load Foundation 6 JS in Brunch?如何在早午餐中加载 Foundation 6 JS？
【发布时间】：2017-08-14 21:52:55
【问题描述】：

我们想在我们的 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 - 那里的映射键是什么？），但是 $ 和 @ 987654327@全局变量在那里，指向jQuery库，很好。

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

【问题讨论】：

标签： javascript zurb-foundation phoenix-framework brunch

【解决方案1】：

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

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"]
    }
},

【讨论】：