Question

我想使用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"
  }
}

Answer 1

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

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

1 个答案: