将 Bootstrap js 插件添加到 brunch-config.js 以用作前端资产？答案

【问题标题】：Add Bootstrap js plugins to brunch-config.js to use as front-end assets?将 Bootstrap js 插件添加到 brunch-config.js 以用作前端资产？
【发布时间】：2016-08-14 02:13:38
【问题描述】：

我想使用 Bootstrap 的 alert.js 插件作为前端资源，但不知道如何使用 brunch-config.js 和 npm 使其工作。

目前我有这样的早午餐配置（它将jQuery 和 Bootstrap css 添加到资产中）：

exports.config = {
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

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

  paths: {
    watched: [
      "web/static",
      "test/static"
    ],

    public: "priv/static"
  },

  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/]
    }
  },

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

  npm: {
    enabled: true,
    whitelist: ["phoenix", "phoenix_html", "jquery", "bootstrap"],
    globals: {
      $: 'jquery',
      jQuery: 'jquery'
    },
    styles: {
      bootstrap: ['dist/css/bootstrap.css']
    }
  }
};

插件文件在这里 - ./node_modules/bootstrap/dist/js/umd/alert.js.

还有一件事：有了这个配置，Brunch 实际上做了一些事情并添加到 /js/app.js 所需的 ./node_modules/bootstrap/dist/js/boostrap.js 文件，该文件已经包含 Alert 插件。

jQuery 可以正常工作，Bootstrap css 也可以。唯一的问题 - Bootstrap js 插件（控制台中没有警告）。

在我的 package.json 我有这个版本的 Bootstrap：

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "bootstrap": "^4.0.0-alpha.2",
    "brunch": "~2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "jquery": "^2.2.3",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "uglify-js-brunch": "~1.7.0"
  }
}

【问题讨论】：

标签： wordpress twitter-bootstrap npm brunch

【解决方案1】：

将require("bootstrap"); 添加到app.js 的末尾为我解决了这个问题。我远未正确理解早午餐/引导程序，但 AFAIK 引导程序的 javascript 方面只是 jQuery 插件的集合。需要引导程序将插件添加到全局 jQuery 对象（已在您的 brunch-config.js 中提供）。

【讨论】：