2016-07-07 36 views
5

Desidero utilizzare il plug-in alert.js di Bootstrap come asset front-end, ma non riesco a capire come farlo funzionare utilizzando brunch-config.js e npm.Aggiungi i plugin bootstrap js a brunch-config.js da utilizzare come risorse front-end?

Al momento ho un tale configurazione il brunch (si aggiunge jQuery e Bootstrap css ai beni):

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

file plugin è qui - ./node_modules/bootstrap/dist/js/umd/alert.js.

Ancora una cosa: con questa configurazione Brunch fa effettivamente qualcosa e aggiunge /js/app.js il ./node_modules/bootstrap/dist/js/boostrap.js file necessario che già contiene il plugin Alert.

jQuery funziona correttamente, Bootstrap css funziona anche. L'unico problema: i plugin di bootstrap js (non ci sono avvisi nella console).

Nel mio package.json ho questa versione di 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" 
    } 
} 

risposta

1

Aggiunta require("bootstrap"); alla fine del app.js risolto il problema per me. Sono ben lontano dalla comprensione del brunch/bootstrap correttamente, ma AFAIK il lato javascript del bootstrap è solo una collezione di plugin per jQuery. La richiesta di bootstrap aggiunge i plug-in all'oggetto globale jQuery (già presentato nel tuo brunch-config.js).

Problemi correlati