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

kov*_*ack 5 wordpress npm twitter-bootstrap brunch

我想使用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']
    }
  }
};
Run Code Online (Sandbox Code Playgroud)

插件文件在这里 - ./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"
  }
}
Run Code Online (Sandbox Code Playgroud)

Nag*_*i45 1

添加require("bootstrap");到末尾app.js为我解决了问题。我还远远没有正确理解 brunch / bootstrap,但据我所知,bootstrap 的 javascript 部分只是 jQuery 插件的集合。需要 bootstrap 将插件添加到全局jQuery对象(已在您的 中呈现brunch-config.js)。