自己寫(xiě)的組件 有的也挺好的揖闸，為了方便以后用自己再用或者給別人用，把組件打包發(fā)布到npm是最好不過(guò)了，本次打包支持 支持正常的組件調(diào)用方式票唆，也支持Vue.use, 也可以直接引用打包好的js文件街佑， 配合vue.js 就不需要webpakc這種構(gòu)建工具了谢翎，可以直接在頁(yè)面內(nèi)使用，下面以 vue-test 這個(gè)包為例
第一步：使用 vue init webpack-simple vue-test 初始化項(xiàng)目
提示: 不要用 vue init webpack npm-practice 初始化項(xiàng)目沐旨，因?yàn)槲覀兙烷_(kāi)發(fā)個(gè)組件森逮，不需要那么多配置，配置多了修改起來(lái)也麻煩磁携，webpack-simple足夠了褒侧。
初始完項(xiàng)目，按照提示輸入項(xiàng)目信息即可谊迄，然后 npm install , npm run dev 讓項(xiàng)目跑起來(lái)闷供，如下圖：
第二步：修改文件目錄
1.在src目錄下新建components文件夾，然后在此文件夾下建立HelloWorld.vue文件
HelloWorld.vue 名字也可以是其他统诺，我們寫(xiě)的這個(gè)組件就是放在該文件里面歪脏，之前的App.vue是用于本地開(kāi)發(fā)，測(cè)試用的入口文件粮呢，也就是用于 npm run dev 的入口文件婿失。
2.在webpack.config.js同級(jí)目錄（也是該組件的根目錄）下新建 index.js文件怠硼， index.js是把HelloWorld.vue文件暴露出去的出口。
修改完之后的文件目錄如下移怯，標(biāo)紅的就是新增的內(nèi)容：
第三步：修改文件內(nèi)容香璃，配置
1.Main.vue內(nèi)容如下（注意name）：
<template>
<div class="container">
<div>{{msg}}</div>
<div>{{propData}}</div>
</div>
</template>
<script>
export default {
name: 'yyl-npm-practice',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
props: {
propData: {
type: String,
default: '我是默認(rèn)值'
}
}
}
</script>
<style >
.container{
text-align: center;
}
</style>
2.App.vue內(nèi)容如下：
<template>
<div id="app">
<hello-world :propData="msg"/>
</div>
</template>
<script>
import helloWorld from 'vue-test-lxw'
export default {
name: 'app',
components:{
helloWorld
},
data () {
return {
msg: 'Hey man!!!!'
}
}
}
</script>
<style>
</style>
3.index.js內(nèi)容如下：
import HelloWorld from './src/component/HelloWorld.vue'
import _Vue from 'vue'
HelloWorld .install = Vue => {
if (!Vue) {
window.Vue = Vue = _Vue
}
Vue.component(HelloWorld .name, HelloWorld )
}
export default HelloWorld ;
4.修改package.json
package.json需要修改private字段(private是true的時(shí)候不能發(fā)布到npm,需設(shè)置成false)； 并增加main字段舟误， main字段是require方法可以通過(guò)這個(gè)配置找到入口文件葡秒，這輸入模塊加載規(guī)范，具體可以參考 這里嵌溢， 主要內(nèi)內(nèi)容截圖如下：
修改完package.json如下眯牧，標(biāo)紅的就是新增和改變的屬性。
5.修改 webpack.config.js
其實(shí)就是修改entry 和output,截圖如下：
說(shuō)明：入口會(huì)根據(jù)開(kāi)發(fā)環(huán)境 赖草，生產(chǎn)環(huán)境切換学少， main.js 是npm run dev 的入口，就是App.vue秧骑， 用于調(diào)試/測(cè)試我們開(kāi)發(fā)的組件; index.js是Main.vue版确， 就是我們開(kāi)發(fā)的組件，我們打包到生產(chǎn)環(huán)境打包就只是單純的 vue-test-lxw 組件
6.修改index.html的js引用路徑乎折，因?yàn)槲覀冃薷牧薿utput 的 filename绒疗，所以引用文件的名字也得變。
到此組件就開(kāi)發(fā)完了骂澄，打包下看看吓蘑， npm run build dist下生成了倆文件，如下：
這個(gè).map文件怎么回事坟冲，其實(shí)就是這段代碼：
生產(chǎn)環(huán)境的時(shí)候磨镶， 我們就不調(diào)試了，也不想要這個(gè).map文件健提，那就先把這個(gè) devtool刪了琳猫，然后放在這里，看下圖矩桂，只要在開(kāi)發(fā)環(huán)境的時(shí)候才啟用這個(gè)調(diào)試沸移，
把dist目錄下的倆文件刪除，再npm run build 就不會(huì)產(chǎn)生.map文件了侄榴。
npm run dev 讓項(xiàng)目跑起來(lái)雹锣，我們?cè)贏pp.vue里面調(diào)用該組件，并做測(cè)試癞蚕，調(diào)試蕊爵。
第四步： 發(fā)布到npm
1. 去 npm 官網(wǎng)注冊(cè)個(gè)賬號(hào) https://www.npmjs.com/
2.在該組件根目錄下的終端（就是 平常輸入 npm run dev的地方），運(yùn)行npm login桦山，會(huì)提示輸入個(gè)人信息攒射，Email是發(fā)布成功后醋旦，自動(dòng)給這個(gè)郵箱發(fā)送一個(gè)郵件，通知發(fā)布成功会放，輸入完饲齐，登錄成功。
3.最后就可以發(fā)布了咧最， npm publish, 如下捂人，發(fā)布成功(每次發(fā)布的時(shí)候packa.json 里面的 version不能一樣，不然不能發(fā)布出去矢沿，手動(dòng)改下版本就行)
去自己的npm上點(diǎn)擊Packages 滥搭，就能看到發(fā)布的包
包的具體信息如下：
使用方法 ：
1.組件內(nèi)部使用
<template>
<div id="app">
<hello-world :propData="msg"/>
</div>
</template>
<script>
import helloWorld from 'vue-test-lxw'
export default {
name: 'app',
components:{
helloWorld
},
data () {
return {
msg: 'Hey man!!!!'
}
}
}
</script>
<style>
</style>
2. main.js 全局安裝：
import HelloWorld from 'vue-test-lxw'
Vue.use(HelloWorld )
然后在其他.vue文件里面，直接使用組件 <hello-world/> 即可
3.直接引用打包后的 vue-test-lxw.js
這種方式就不需要webpack這類的構(gòu)建工具捣鲸，跟jquery的方式差不多瑟匆，可以直接頁(yè)面引用，使用方法示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<vue-test-lxw :propData="propData"></vue-test-lxw>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./dist/vue-test-lxw.js"></script>
<script>
new Vue({
el: '#app',
data: function() { return {
propData: 'Hey man!!!' }
},
methods: {
}
}) </script>
</body>
</html>
采坑記錄：
1.在webpack.config.js里設(shè)置 resolve（比如 設(shè)置@做為根目錄 ）栽惶， 開(kāi)發(fā)環(huán)境沒(méi)問(wèn)題愁溜，生產(chǎn)環(huán)境就用不了了，所以大家就用平常的相對(duì)路徑類吧媒役，雖然麻煩了點(diǎn)祝谚。
2.圖片生產(chǎn)環(huán)境不能用，解決方法可以把圖片轉(zhuǎn)成base64, 可以用這個(gè) 在線圖片轉(zhuǎn)base64,或者把圖片放在網(wǎng)上酣衷，引用圖片的網(wǎng)上資源路徑。
3.字體圖標(biāo)在生產(chǎn)環(huán)境也用不了次泽，如果用到了字體圖標(biāo)穿仪，就別把字體圖標(biāo)的資源打包進(jìn)去了，引用該組件的時(shí)候意荤，需要再引用字體圖標(biāo)的資源啊片。
start ====> 2019-04-17更新
后來(lái)發(fā)現(xiàn)其實(shí)圖片和字體圖標(biāo)也可一起打包到j(luò)s里面，需要用到 url-loader 把limit參數(shù)設(shè)置大點(diǎn)就行玖像，這樣就可以把圖片紫谷，字體圖標(biāo)也都打包到j(luò)s里面了，這樣使用的時(shí)候捐寥，就不用單獨(dú)引用這些靜態(tài)資源了笤昨， 代碼如下：
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
name: '[name].[ext]?[hash]',
limit: 99999
}
},
{
test: /\.(svg|ttf|eot|woff|woff2)$/,
loader: 'url-loader',
options:{
name:'[name].[ext]',
limit: 9999999
}
}
end ====> 2019-04-17更新
想看源碼的話，只要在自己項(xiàng)目里 npm install yyl-npm-practice 就可以在 node_modules 下找到了握恳。
原文轉(zhuǎn)帖：https://www.cnblogs.com/yalong/p/10388384.html
