在browserify-shim中使用Bootstrap JS組件

我想弄清楚如何正確使用browserify-shim與bootstrap js或任何其他組件進行傳導。我並不總是希望包括整個級聯的JS文件，所以我分裂單墊片的模塊，這裏是從我的package.json的摘錄現在在browserify-shim中使用Bootstrap JS組件

"browserify": { 
    "transform": ["browserify-shim"] 
}, 
"browser": { 
    "twbs-affix": "./node_modules/bootstrap/js/affix.js", 
    "twbs-alert": "./node_modules/bootstrap/js/alert.js", 
    "twbs-carousel": "./node_modules/bootstrap/js/carousel.js", 
    "twbs-collapse": "./node_modules/bootstrap/js/collapse.js", 
    "twbs-dropdown": "./node_modules/bootstrap/js/dropdown.js", 
    "twbs-modal": "./node_modules/bootstrap/js/modal.js", 
    "twbs-popover": "./node_modules/bootstrap/js/popover.js", 
    "twbs-scrollspy": "./node_modules/bootstrap/js/scrollspy.js", 
    "twbs-tab": "./node_modules/bootstrap/js/tab.js", 
    "twbs-tooltip": "./node_modules/bootstrap/js/tooltip.js", 
    "twbs-transition": "./node_modules/bootstrap/js/transition.js", 
    "jquery": "./node_modules/jquery/dist/jquery.js" 
}, 
"browserify-shim": { 
    "jquery": "jQuery", 
    "twbs-affix": { 
    "depends": ["jquery"] 
    }, 
    "twbs-alert": { 
    "depends": ["jquery"] 
    }, 
    "twbs-carousel": { 
    "depends": ["jquery"] 
    }, 
    "twbs-collapse": { 
    "depends": ["jquery"] 
    }, 
    "twbs-dropdown": { 
    "depends": ["jquery"] 
    }, 
    "twbs-modal": { 
    "depends": ["jquery"] 
    }, 
    "twbs-popover": { 
    "depends": ["jquery"] 
    }, 
    "twbs-scrollspy": { 
    "depends": ["jquery"] 
    }, 
    "twbs-tab": { 
    "depends": ["jquery"] 
    }, 
    "twbs-tooltip": { 
    "depends": ["jquery"] 
    }, 
    "twbs-transition": { 
    "depends": ["jquery"] 
    } 
}

，當我需要的twbs-alert模塊的地方，我可以用它列入require('twbs-alert')。這是你如何做到的，或者分開組件是否真的無關緊要，因爲在縮小過程中未使用的組件將被刪除？

編輯

由於v4 of bootstrap在ES6墊片的做法都將被廢棄，因爲你可以通過import statement

來源

2016-02-11 miron

什麼是browserify涼亭組件的重點？ – webdeb

Bower + browserify與https://github.com/eugeneware/debowerify之類的東西傳導？我會試一試，謝謝。 – miron

似乎在使用debowerify方法時無法定義依賴關係。 – miron

未使用的組件將不會在縮小過程中去除導入模塊完全寫的，所以你的方法是一個很好的方法。

對於你的問題最好的模擬方法是人們試圖避免從Lodash/Underscore中導入未使用的組件。在縮小過程中這不起作用。如果你使用Babel，那麼a plugin就可以達到這些庫的預期結果。

你的一個選擇是爲Bootstrap編寫自己的類似Babel插件。

來源

2016-02-11 16:16:58 YPCrumble

我只是看了引導程序的v4代碼，代碼是用es6編寫的，這會在插件版本發佈時使插件過時。我想我會等到版本4穩定後再使用Shim方法一段時間。 – miron

在browserify-shim中使用Bootstrap JS組件

回答

相關問題