資訊專欄INFORMATION COLUMN
摘要：簡單說明原理使用實現按需引入打包。這里采用多入口配置，實現各個功能模塊分別打包成一個文件，并使用將樣式進行抽離后，按入口進行打包為對應的文件。只要在指定入口名為。這個相關配置已經發布了包。
簡單說明原理：
使用babel-plugin-component實現按需引入、打包。element源碼關于按需引入的研究：
將webpack配置成多入口，保證最終打包的目錄結構符合babel-plugin-component插件的要求，實現按需加載
1、build目錄中是cooking配置文件，cooking是餓了么前端研發的基于webpack的前端構建工具，我們使用原始的webpack實現。此處源碼忽略。
2、example中是element項目的例子存放，打開element網頁，可看見的項目入口。
3、packages目錄中，是所有的功能模塊，以alert模塊為例，分析目錄結構
alert模塊目錄，有一個index.js作為模塊入口，在入口處，引入src目錄中的主要組件，再對該組件進行拓展，增加install方法，我們知道，在對vue進行擴展，使用vue.use(...)時，vue內部會調用插件的install方法，此處給alert組件增加install方法，則最終打包完成后，按需引入alert功能組件時，可以使用vue.use(alert)進行注冊組件到全局。
其他功能模塊的目錄結構也大同小異，在入口處對組件進行install擴展。
4、src目錄中存放一些公共的mixin等工具和一個index.js入口文件，這個入口文件是打包后兼具所有功能組件的入口，上源碼，一個一個分析：
首先將packages中的各個功能模塊引入
定義一個install方法，在此方法中，將所有的功能模塊進行注冊。
components.map(component => {
Vue.component(component.name, component);
});
遍歷注冊
Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; Vue.prototype.$ELEMENT = ELEMENT;
對vue原型進行擴展，使vue實例中可直接使用this.$alert等便捷方法。
最后，將所有功能模塊和install方法一起導出。這樣當引入element-ui時，便可以使用vue.use(element-ui)進行注冊，即將所有的功能組件進行全局注冊。
5、lib目錄是按babel-plugin-component插件要求打包后存放最終代碼的目錄。
詳細看看這個目錄中的結構
目錄中，將各個功能模塊打包成了一個.js文件，在theme-chalk中，存放這名稱和功能模塊相同的.css文件。為何要這樣打包？？這就進入了我們的重點，看看babel-plugin-component插件的文檔：
import { Button } from "antd" 會被解析成同時引入antd/lib/button/index.js和引入lib/button/style.css
這就是這個插件為我們帶來的按需引入的功能。插件會去解析你的代碼，當你引入的是配置的modules中的某一部分時，自動為你解析，只為你的項目引入你指定的部分。
這個插件有幾種目錄結構的配置方案，剛剛解釋的只是其中一種，我們來看element-ui采用的也是我們要使用的一種：
在lib下，存在幾個模塊componentA、componentB，當引入import {componentA} from "..."時，會被解析成從lib/componentA,此時，這個componentA若是目錄，則進入目錄找目錄入口，也就是index.js，若componentA是個.js文件，則直接引入這個文件。
樣式文件會通過你的bablerc配置，從lib中指定的目錄中去引入同名文件
看看bablerc中的相關配置：
在plugins中，增加component配置，component相關option配置：
看看element官網說明的配置：
配置了libraryName和styleLibraryName。
好，到此element的分析及babel-plugin-componentbable插件的說明暫時告一段落。
咱們繼續看我們如何去實現。
項目是用vue-cli搭建的項目：
1、build中是webpack相關配置
2、example目錄是開發時調試用
3、src目錄中components中是各個功能模塊，各功能模塊的入口中同element一樣，對組件進行擴展，增加install方法，將組件進行全局注冊，index.js是入口，其中引入所有功能模塊，同時導出模塊和install方法，將所有模塊進行注冊。
4、lib中是最終打包的目標目錄
5、增加components.json文件
記錄將要打包的功能模塊名稱和路徑
規劃中，需要將各個模塊打包至lib，一個功能模塊為一個.js文件，并且在theme目錄中存在一個同名的.css文件，這樣使用時借助babel-plugin-component插件就可實現按需引入。還需要一個總的index.js包含所有的功能模塊，和一個index.css包含所有的樣式。
這里采用多入口(entry)配置，實現各個功能模塊分別打包成一個.js文件，并使用extract-text-webpack-plugin將樣式進行抽離后，按入口chunk進行打包為對應的.css文件。
當將需要打包至一起是，使用單個入口，抽離所有css到一個css文件。
所以完成打包目標需要執行兩個打包命令，看package.json相關配置：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build_all": "node build/build.js all"
}
npm run build進行將各個模塊打包為各自的.js文件，樣式文件也同時抽離處理為同名的.css，npm run build_all將所有的功能打包為index.js和index.css
上webpack詳細配置更改代碼：
首先在config中將assetsRoot，output的路徑設置為lib
在build.js中，獲取命令行參數，根據參數判斷需要進行的打包任務，下面詳細介紹webpack.prod.conf和webpack.prodAll.conf文件
1、刪除HtmlWebpackPlugin相關配置，這里只需打包為js文件和css文件，不涉及html
2、引入components.json，根據配置的模塊及路徑配置入口entrys，配置完后，將入口寫入entry配置
3、ExtractTextPlugin插件是進行css抽離的，這里不用處理
4、ouput中，出口.js文件的名稱不能寫死
5、在plugins插件配置處，ExtractTextPlugin相關配置，filename不能寫死，需要根據chunk名稱自動生成對應名稱。這里設置為"/theme/[name].css"指定目錄lib/theme存放
1、同樣刪除html相關配置
注意入口配置，設置為src/index.js這個文件中引入了所有的功能模塊。
output和抽離css的配置中的filename寫死成index也可，寫成[name]按chunk名也可，因為入口只有一個。只要在entry指定入口名為index。
到此，webpack配置就差不多完成了。最后上一個打包完成后的目錄結構：
這樣，在使用時，只需要引入babel-plugin-component插件，并進行配置，配置中，指定libraryName為庫名，指定styleLibraryName為theme即可。
這個相關配置已經發布了npm包。其中只有兩個功能組件，一個upload，一個input。
有讀者想要試按需引入功能的可以按如下配置：
1、bable配置：
2、引入時：
本文完成啦，希望能對你有所幫助～～學無止境，大家共勉
特別說明1、相關代碼已經發布至github，地址：https://github.com/yuanalina/installAsRequired
2、打包時需要注意名稱命名需要使用kebab-case (短橫線分隔命名)格式，例如：button-model,在components.json配置中，需要使用短橫線分隔命名；
3、在后續的配置中我進行了優化，把整體打包和各組件分離打包整合到了一起，更改的地方為：在components.json中增加"index": "./src/index.js"即可。詳見github
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96595.html
摘要：組件庫開發總結由于工作需要，最近在學習怎么開發一個組件庫。按需打包的使用要使用按需打包，不僅組件庫的打包需要做處理，項目中也需要做處理。 Vue組件庫開發總結 由于工作需要，最近在學習怎么開發一個Vue組件庫。主要需要實現以下點：1.組件使用npm包引入2.實現按需引入及按需打包項目中許多實現是參考的element-ui，特別是webpack打包部分 組織項目 項目生成 項目生成是直接...
摘要：開發完了，并部署到服務器后，就遇到了一個非常明顯的問題。所以可以利用按需加載來進一步縮小文件的體積。另外圖片還可以去下面這個網上壓縮一下經過上述的幾步，首頁的加載速度已經比較快了，項目經理也比較滿意。初步結束了首頁加載慢的問題的研究。 本次開發的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構。隨后在項目開發當中，添加了自己寫的UI組件，和復雜的業務邏輯。整個項目...
摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言 上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操作，點擊側邊欄的一些操作，最重要的就是路由的切換。看了上一篇的伙伴也不難發現，除了點擊側邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...
摘要：進入主題使用我們在創建項目時已經選擇安裝了，安裝完就能使用了。 注：文章中的nuxt為2.0.0版本 眾所周知vue單頁面應用的seo很不友好，每次打開頁面先獲取的節點也就是一個,而這對想用vue做spa又想擁有友好搜索引擎seo優化的人來說就好比雞肋。好在vue的官方出了nuxt，既能讓我們使用spa又能擁有良好的搜索引擎優化；nuxt介紹->https://zh.nuxtjs.or...
摘要：先來看看是怎么做的，官方的的快速手上使用一個了插件，作用就是代碼轉換轉換為到這我們可以知道，要搭建一個按需加載的組件庫。 按需加載的原理 按需加載，本質上是把一個組件庫的不同組件拆分成不同文件，按照需要引用對應的文件，而該文件暴露一個install方法，供Vue.use使用。比如：我只想引用element庫里的一個Button組件 import Button from element-...
閱讀 2028·2023-04-25 22:50
閱讀 2842·2021-09-29 09:35
閱讀 3395·2021-07-29 10:20
閱讀 3168·2019-08-29 13:57
閱讀 3366·2019-08-29 13:50
閱讀 3041·2019-08-26 12:10
閱讀 3536·2019-08-23 18:41
閱讀 2641·2019-08-23 18:01
