資訊專(zhuān)欄INFORMATION COLUMN
摘要：但是，面對(duì)辣么多的配置文件，還是從開(kāi)始自己來(lái)吧，畢竟我只想打包一個(gè)組件。這里想一下我們的需求，我們想要打包一個(gè)組件，使用，根據(jù)上面的說(shuō)明，不難想到還應(yīng)該需要一個(gè)可以用來(lái)識(shí)別并轉(zhuǎn)換文件，一句話(huà)，就是把按下面格式的編寫(xiě)的組件轉(zhuǎn)換為模塊。
對(duì)于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項(xiàng)目結(jié)構(gòu)，進(jìn)行.vue單文件組件的編寫(xiě)，使用 npm run build命令會(huì)從main.js開(kāi)始打包項(xiàng)目中的依賴(lài)(通常main.js中引用App.vue，作為頁(yè)面最高層級(jí)的組件，我們自己寫(xiě)的組件會(huì)在App.vue中引用)，build的結(jié)果會(huì)生成打包好的靜態(tài)js/css文件以及index.html，這對(duì)于寫(xiě)單頁(yè)應(yīng)用來(lái)說(shuō)非常方便，但是，變化的需求總是很多的~
如果我只想在html頁(yè)面里用到我寫(xiě)的vue組件（同時(shí)個(gè)人也更加偏向使用html頁(yè)面的寫(xiě)法），而不是構(gòu)建一整個(gè)單頁(yè)應(yīng)用，在vue-cli里可以嗎？？？當(dāng)然可以做到，了解其中的配置，修改成自己想要的樣子，我們可以做到只打包一個(gè)組件的效果。
但是，面對(duì)辣么多的配置文件，還是從0開(kāi)始自己來(lái)吧，畢竟我只想打包一個(gè).vue組件。在正式開(kāi)始寫(xiě)示例代碼之前，為了文章的完整性，先簡(jiǎn)單介紹一下幾個(gè)工具。
webpackwebpack是干嘛的？他是一個(gè)模塊打包器，他的目標(biāo)就是將JavaScript文件都打包到一起，用于在瀏覽器中使用，即可以通過(guò) 現(xiàn)在正式開(kāi)始
先建立一個(gè)文件夾：testproject;
命令行進(jìn)入到testproject ,運(yùn)行 npm init,根據(jù)命令行提示，進(jìn)行項(xiàng)目的一些初始化操作;
完成之后，我們的項(xiàng)目中就會(huì)有package.json文件，打開(kāi)package.json，配置打包需要的一些dependence，這里我就是從一個(gè)vue-cli項(xiàng)目的package.json文件中拷過(guò)來(lái)一些基本的依賴(lài)，如下：
其中dependencies里就是拷過(guò)來(lái)依賴(lài)的部分
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lodash": "^4.17.4",
"css-loader": "^0.28.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"file-loader": "^1.1.4"
}
}
運(yùn)行 npm install,稍等片刻，我們需要的模塊就ok了。
這里說(shuō)明一下，npm包之間也存在依賴(lài)關(guān)系，如果存在有‘依賴(lài)的依賴(lài)’ 你沒(méi)有寫(xiě)到配置的dependencies中，命令行會(huì)有提示，注意看。為什么說(shuō)這個(gè)，因?yàn)槲以诳截愐蕾?lài)的時(shí)候，就略過(guò)了‘file-loader’，
so sad.^_^
現(xiàn)在可以寫(xiě)我們的示例內(nèi)容了，這里我們?cè)O(shè)定我們要寫(xiě)的組件為hello.vue，組件打包后的名字叫hellobundle.js,我們?cè)趕ayhello.html中要引用的組件就是打包后的hellobundle.js，直接在testproject目錄下新建相關(guān)文件，內(nèi)容如下：
Title
{{text}}
很簡(jiǎn)單的內(nèi)容，現(xiàn)在我們想要打包hello.vue這個(gè)組件，對(duì)于打包我們選擇使用script命令+webpack.config.js的方式（這里不了解可以移至webpack官方指南，說(shuō)明很詳細(xì)），還是在根目錄，新建webpack.config.js文件，內(nèi)容如下：
//webpack.config.js
const path = require("path")
module.exports = {
entry : "./hello.vue", //入口文件
output : {
filename : "hellobundle.js", //出口文件名
path : path.resolve(__dirname), //當(dāng)前目錄
library : "hello" // 打包后模塊的名稱(chēng)
},
module : {
rules : [ //定義不同類(lèi)型的文件使用的loader
{
test : /.vue$/,
loader : "vue-loader"
},
{
test : /.js$/,
loader : "babel-loader"
}
]
}
}
這里差不多是最簡(jiǎn)化的配置，hello.vue作為我們打包的入口文件，配置出口文件的名稱(chēng)、路徑以及最終模塊對(duì)外的名稱(chēng)，寫(xiě)好了這個(gè)，再在package.json中加上一條script命令，如下：
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build":"webpack" //<-------就四這行，，
},
寫(xiě)好了.vue組件文件、webpack的配置文件，現(xiàn)在我們運(yùn)行npm run build, 結(jié)果如下：
在testproject目錄下，我們也如愿得到了hello.vue打包后的hellobundle.js，整個(gè)testproject結(jié)果如下
終于，我們可以來(lái)驗(yàn)證這個(gè)打包后的hellobundle.js是否可用了，在瀏覽器打開(kāi)sayhello.html:
ofcourse you can see yellow hello,,這里說(shuō)一下我們的sayhello頁(yè)面中，注冊(cè)組件時(shí)用到的是：
components:{
hello:hello.default //這里我們后面會(huì)解釋為什么這樣寫(xiě) }
其實(shí)在一開(kāi)始的時(shí)候，我用的是webpack配置的hello變量，然后打開(kāi)sayhello頁(yè)面時(shí)并沒(méi)有出現(xiàn)預(yù)期的效果，于是在控制臺(tái)打印了一下我們hellobundle.js輸出的hello變量：
so,就更正了一下hello的引用。
結(jié)語(yǔ)本著最簡(jiǎn)原則，示例中的項(xiàng)目結(jié)構(gòu)沒(méi)有按照src/dist這樣規(guī)范的目錄結(jié)構(gòu)來(lái)寫(xiě)，寫(xiě)到這一步之后，我們可以繼續(xù)深入完善我們的打包功能，對(duì)webpack使用命令行參數(shù)動(dòng)態(tài)打包文件、hot-reloading等，這樣的話(huà)，就又復(fù)雜了，不再贅述。--end 歡迎指正^_^
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54503.html
摘要：但是，面對(duì)辣么多的配置文件，還是從開(kāi)始自己來(lái)吧，畢竟我只想打包一個(gè)組件。這里想一下我們的需求，我們想要打包一個(gè)組件，使用，根據(jù)上面的說(shuō)明，不難想到還應(yīng)該需要一個(gè)可以用來(lái)識(shí)別并轉(zhuǎn)換文件，一句話(huà)，就是把按下面格式的編寫(xiě)的組件轉(zhuǎn)換為模塊。 對(duì)于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項(xiàng)目結(jié)構(gòu)，進(jìn)行.vue單文件組件的編寫(xiě)，使用 npm run build命令會(huì)從main...
摘要：但是，面對(duì)辣么多的配置文件，還是從開(kāi)始自己來(lái)吧，畢竟我只想打包一個(gè)組件。這里想一下我們的需求，我們想要打包一個(gè)組件，使用，根據(jù)上面的說(shuō)明，不難想到還應(yīng)該需要一個(gè)可以用來(lái)識(shí)別并轉(zhuǎn)換文件，一句話(huà)，就是把按下面格式的編寫(xiě)的組件轉(zhuǎn)換為模塊。 對(duì)于vue單文件組件的使用，我們知道使用vue-cli可以快速生成項(xiàng)目結(jié)構(gòu)，進(jìn)行.vue單文件組件的編寫(xiě)，使用 npm run build命令會(huì)從main...
摘要：其實(shí)就是我們開(kāi)始掛載上去的我們?cè)谶@里出去，我們就可以在回調(diào)里面只處理我們的業(yè)務(wù)邏輯，而其他如斷網(wǎng)超時(shí)服務(wù)器出錯(cuò)等均通過(guò)攔截器進(jìn)行統(tǒng)一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開(kāi)始之前 隨著業(yè)務(wù)的不斷累積，目前我們 ToC 端主要項(xiàng)目，除去 node_modules， bu...
摘要：其實(shí)就是我們開(kāi)始掛載上去的我們?cè)谶@里出去，我們就可以在回調(diào)里面只處理我們的業(yè)務(wù)邏輯，而其他如斷網(wǎng)超時(shí)服務(wù)器出錯(cuò)等均通過(guò)攔截器進(jìn)行統(tǒng)一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開(kāi)始之前 隨著業(yè)務(wù)的不斷累積，目前我們 ToC 端主要項(xiàng)目，除去 node_modules， bu...
摘要：作為目前最熱門(mén)最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式。的新版本，的簡(jiǎn)稱(chēng)。的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包插件工具命令等，便于開(kāi)發(fā)和維護(hù)。 Vue.js作為目前最熱門(mén)最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js，了解Vue.js的開(kāi)發(fā)流程，并進(jìn)一步理解如何通...
閱讀 2098·2021-11-23 09:51
閱讀 3379·2021-09-28 09:36
閱讀 1161·2021-09-08 09:35
閱讀 1818·2021-07-23 10:23
閱讀 3308·2019-08-30 15:54
閱讀 3027·2019-08-29 17:05
閱讀 473·2019-08-29 13:23
閱讀 1327·2019-08-28 17:51
