2016-07-07 9 views
5

Ich möchte Bootstrap alert.js Plugin als Front-End-Asset verwenden, aber nicht herausfinden, wie es funktioniert mit brunch-config.js und npm.Bootstrap js-Plugins zu brunch-config.js hinzufügen, um sie als Front-End-Assets zu verwenden?

Im Moment habe ich eine solche Brunch config (es fügt jQuery und Bootstrap CSS Vermögenswerte):

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'] 
    } 
    } 
}; 

Plugin-Datei hier ist - ./node_modules/bootstrap/dist/js/umd/alert.js.

Eine weitere Sache: Mit dieser Konfiguration Brunch tatsächlich etwas tut, und fügt die benötigten ./node_modules/bootstrap/dist/js/boostrap.js Datei /js/app.js, die bereits die Alert Plugin enthält.

jQuery funktioniert einwandfrei, Bootstrap CSS funktioniert auch. Das einzige Problem - Bootstrap js plugins (es gibt keine Warnungen in der Konsole).

In meinem package.json Ich habe diese Version von 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" 
    } 
} 

Antwort

1

require("bootstrap"); bis Ende app.js Hinzufügen das Problem für mich gelöst. Ich bin weit davon entfernt, Brunch/Bootstrap richtig zu verstehen, aber AFAIK die Javascript-Seite von Bootstrap ist nur eine Sammlung von Plugins für jQuery. Wenn Bootstrap erforderlich ist, werden die Plugins dem globalen Objekt jQuery hinzugefügt (bereits in Ihrer brunch-config.js).