手把手教你寫一個Vue組件發佈到npm且可外鏈引入使用

前言

咱們爲何要寫個組件上傳到npm鏡像上呢，咱們確定遇到過這樣一個場景，項目中有不少地方與某個功能類似，你想到的確定是把該功能封裝成Component組件，後續方便咱們調用。可是過了一段時間，你的Leader讓你去開發另外一個項目，結果你在哪一個項目中又看見了相似的功能，你這時會怎麼作? 你也可使用Ctrl + c + v大法，拿過來上一個項目封裝好的代碼，可是若是需求有些變更，你得維護兩套項目的代碼，甚至之後更多的項目....，這時你就能夠封裝一個功能上傳到大家公司內網的npm上(或者本身的帳號上)，這樣每次遇到相似的功能直接npm install 安裝import導入進來使用就能夠，需求有變更時徹底能夠改動一處代碼。javascript

配置環境

筆者這裏使用的是Webpack配置(有點菜，不要介意)，也能夠安裝一個Vue-cli簡單版的，它那裏面有暴露Webpack的配置(也得修改自行配置)，咱們來配置一下打包組件環境，通常開發組件庫都是使用的umd格式，這種格式支持Es Module、CommonJs、AMD三種引入方式使用，主要就是Webpack裏的library和libraryTarget，若是不明白的看這裏詳解webpack的out.libraryTarget屬性css

我這裏的Webpack版本爲4, 最好跟着本章裏的插件版本號進行安裝，避免出現版本兼容問題html

項目結構

|- /node_modules
|- /src
   |- Tag.vue
   |- main.js
|- index.html
|- webpack.config.js
|- package.json
複製代碼

初始化Package.json

npm init -y
複製代碼

安裝Webpack && Loader && Plugin

cnpm i webpack webpack-cli -D
cnpm i css-loader style-loader -D
cnpm i file-loader -D
cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
cnpm i html-webpack-plugin@3.2.0 -D
複製代碼

css-loader style-loader 配置.css文件及樣式使用
file-loader 配置特殊字體和圖片使用
vue-loader 處理.vue文件後綴
vue 使用Vue語法
vue-template-compiler 處理.vue文件裏的template模板語法

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]  
            },
            {
                test: /\.(ttf|eot|woff|svg|woff2)/,
                use: "file-loader"
            },
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ]
}
複製代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</html>
複製代碼

以上咱們基本環境就搭建完啦，能夠在終端使用npx webpack運行看看哦。前端

封裝組件

我這裏只作一個示例哈，代碼就不寫那麼複雜，你們知道怎麼打包使用就行，具體封裝成啥樣看大家公司需求啦~。筆者這裏使用Element Ui組件來作一個示例，相信大部分小夥伴公司也在使用Element Ui。假如咱們項目中有如下相似的功能就能夠單獨封裝起來。vue

main.js

import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTag from "./Tag.vue"
Vue.component(Tag.name, Tag)
export default customTag
複製代碼

Tag.vue

<template>
  <div class="Tag"> {{ msg }} <el-tag type="success">標籤二</el-tag> </div>
</template>

<script> export default { name: 'Tag', data() { return { msg: "hello 蛙人", } }, created() { }, components: {}, watch: {}, methods: { } } </script>
<style scoped> </style>

複製代碼

Webpack.config.js

將webpack.config.js裏的output修改成以下java

output: {
    filename: "index.js",
    library: "Modal",
    libraryTarget: "umd"
}
複製代碼

配置完以後就可使用npx webpack打包，能夠看到有一個dist目錄，該目錄下存在一個index.js, 這個文件就是咱們封裝的Tag.vue文件, 你能夠將它引入到你的項目中，進行調用，該文件支持Es Module、CommonJs、AMD三種方式引入。node

import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
Vue.component(Tag.name, Tag)
import CustomTag from "./index" // 打包完的，直接引入進來
new Vue({
    el: "#app",
    render: h => h(CustomTag)
})
複製代碼

Npm發佈

若是沒有npm帳號呢，先去官網註冊一個npm帳號這裏webpack

新建一個發佈包項目文件夾

在終端執行npm init -y ，進行初始package.json文件，主要信息就是name和main字段，前者是這個包的名稱(也就是npm instal xxx)，後者則是咱們打包好的文件Tag文件，默認main就去找這個入口文件。git

注意：包名稱不能包含大寫，包名稱不能包含大寫，包名稱不能包含大寫，重要的事情說三遍github

{
  "name": "custom-tag-waren",
  "version": "1.0.0",
  "description": "這是xxxx",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "WaRen",
  "license": "ISC"
}
複製代碼

若是淘寶鏡像以前被更改，先改回來執行如下命令

npm config set registry http://registry.npmjs.org
複製代碼

註冊完以後，執行npm login, 依次填寫你的用戶名、密碼、郵箱

執行npm publish發佈，而後等待進度條完成便可。

整理一些常見的發佈錯誤

這是由於鏡像設置成淘寶鏡像了，設置回來便可

no_perms Private mode enable, only admin can publish this module
複製代碼

通常是沒有登陸，從新登陸一下 npm login 便可

npm publish failed put 500 unexpected status code 401
複製代碼

包名被佔用，改個包名便可，最好在官網查一下是否有包名被佔用，以後再重命名

npm ERR! you do not have permission to publish 「your module name」. Are you logged in as the correct user?
複製代碼

郵箱未驗證，去官網驗證一下郵箱

you must verify your email before publishing a new package
複製代碼

npm安裝使用

cnpm i custom-tag-waren -D
複製代碼

main.js

import Vue from 'vue'
import { Tag } from 'element-ui';
import 'element-ui/lib/theme-chalk/tag.css';
import customTagWaren from "custom-tag-waren"  // 下載完引入進來
Vue.component(Tag.name, Tag)
new Vue({
    el: "#app",
    render: h => h(customTagWaren)
})
複製代碼

到此爲止就完成了一個組件的打包上傳下載，這樣咱們在每一個項目須要的時候直接npm install安裝就行，當需求改動的時候只改一個文件而後再次發佈就行。是否是很方便啦。

外鏈引入

咱們也不上傳npm上，直接使用外鏈的形式使用，下面咱們來看看

import引入

<template>
  <div class="Tag"> <TagEl/> </div>
</template>

<script> import TagEl from "./index" export default { name: 'Tag', data() { return { } }, components: { TagEl }, } </script>
<style scoped> </style>
複製代碼

上面example中，咱們看到直接引入了index.js文件並進行註冊組件，直接就可使用啦。

script引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Tag/>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script type="text/javascript" src="./dist/index.js"></script>
</body>
<script> new Vue({ el: "#app", components: { Tag: Tag.default } }) </script>
</html>
複製代碼

上面example中，直接使用script標籤引入進來，也是註冊完使用就能夠。那麼咱們怎麼知道他名字是Tag，這個你在封裝組件的使用，必須指定Name名稱。

export default {
	name: "Tag"
}
複製代碼

感謝

謝謝你讀完本篇文章，但願對你能有所幫助，若有問題歡迎各位指正。

我是蛙人(✿◡‿◡)，若是以爲寫得能夠的話，請點個贊吧❤。

感興趣的小夥伴能夠加入 [ 前端娛樂圈交流羣 ] 歡迎你們一塊兒來交流討論

寫做不易，「點贊」+「在看」+「轉發」 謝謝支持❤

往期好文

《分享12個Webpack中經常使用的Loader》

《聊聊什麼是CommonJs和Es Module及它們的區別》

《帶你輕鬆理解數據結構之Map》

《這些工做中用到的JavaScript小技巧你都知道嗎？》

《【建議收藏】分享一些工做中經常使用的Git命令及特殊問題場景怎麼解決》

《你真的瞭解ES6中的函數特性麼？》

參考

blog.csdn.net/weixin_4360…