2016-07-07 1 views
5

Je souhaite utiliser le plug-in alert.js de Bootstrap en tant qu'actif frontal, mais je ne vois pas comment le faire fonctionner en utilisant brunch-config.js et npm.Ajouter les plugins Bootstrap js à brunch-config.js pour les utiliser comme ressources frontales?

Au moment me reste que cette config brunch (il ajoute jQuery et Bootstrap aux actifs 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'] 
    } 
    } 
}; 

fichier Plugin est ici - ./node_modules/bootstrap/dist/js/umd/alert.js.

Encore une chose: avec cette config Brunch ne fait quelque chose et ajoute à /js/app.js le fichier ./node_modules/bootstrap/dist/js/boostrap.js nécessaire qui contient déjà le plugin Alert.

jQuery fonctionne correctement, bootstrap css fonctionne également. Le seul problème - Bootstrap js plugins (il n'y a pas d'avertissement dans la console).

Dans mon package.json je cette version de 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" 
    } 
} 

Répondre

1

Ajout require("bootstrap"); à la fin de app.js a résolu le problème pour moi. Je suis loin de comprendre le brunch/bootstrap correctement, mais AFAIK le côté javascript de bootstrap est juste une collection de plugins pour jQuery. L'exigence de bootstrap ajoute les plugins à l'objet global jQuery (déjà présenté dans votre brunch-config.js).