手把手教你写一个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…