2016-07-07 5 views
5

ブートストラップのalert.jsプラグインをフロントエンド資産として使用したいが、brunch-config.jsnpmを使って動作させる方法を理解できない。私は、このようなブランチの設定(それは資産にjQueryとブートストラップCSSを追加して)持っている瞬間フロントエンドアセットとして使用するために、ブートストラップjsプラグインをbrunch-config.jsに追加しますか?

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で実際に何かをして、すでにAlertプラグインが含まれている必要./node_modules/bootstrap/dist/js/boostrap.jsファイルを/js/app.jsする追加されます。

jQueryが適切に動作し、ブートストラップCSSも機能します。唯一の問題は - ブートストラップのjsプラグインです(コンソールに警告はありません)。私package.json

私はブートストラップのこのバージョンがあります:app.jsの最後にrequire("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" 
    } 
} 

答えて

1

は私のために問題を解決しました。私はブランチ/ブートストラップを正しく理解していませんが、AFAIKはブートストラップのjavascript側をjQueryのプラグインのコレクションに過ぎません。ブートストラップを要求すると、グローバルjQueryオブジェクト(既にbrunch-config.jsに表示されています)にプラグインが追加されます。

関連する問題