前言

咱们为什么要写个组件上传到npm镜像上呢，咱们必定遇到过这样一个场景，我的项目中有很多中央与某个性能类似，你想到的必定是把该性能封装成Component组件，后续不便咱们调用。然而过了一段时间，你的Leader让你去开发另一个我的项目，后果你在哪个我的项目中又看见了相似的性能，你这时会怎么做? 你也能够应用Ctrl + c + v大法，拿过去上一个我的项目封装好的代码，然而如果需要有些变动，你得保护两套我的项目的代码，甚至当前更多的我的项目....，这时你就能够封装一个性能上传到你们公司内网的npm上(或者本人的账号上)，这样每次遇到相似的性能间接npm install 装置import导入进来应用就能够，需要有变动时齐全能够改变一处代码。

配置环境

笔者这里应用的是Webpack配置(有点菜，不要介意)，也能够装置一个Vue-cli简略版的，它那外面有裸露Webpack的配置(也得批改自行配置)，咱们来配置一下打包组件环境，个别开发组件库都是应用的umd格局，这种格局反对Es Module、CommonJs、AMD三种引入形式应用，次要就是Webpack里的library和libraryTarget，如果不明确的看这里详解webpack的out.libraryTarget属性

我这里的Webpack版本为4, 最好跟着本章里的插件版本号进行装置，避免出现版本兼容问题

我的项目构造

|- /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 -Dcnpm i css-loader style-loader -Dcnpm i file-loader -Dcnpm i vue-loader@15.7.0 vue vue-template-compiler -Dcnpm 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。如果咱们我的项目中有以下相似的性能就能够独自封装起来。

main.js

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

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批改为如下

output: {    filename: "index.js",    library: "Modal",    libraryTarget: "umd"}

配置完之后就能够应用npx webpack打包，能够看到有一个dist目录，该目录下存在一个index.js, 这个文件就是咱们封装的Tag.vue文件, 你能够将它引入到你的我的项目中，进行调用，该文件反对Es Module、CommonJs、AMD三种形式引入。

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账号这里

新建一个公布包我的项目文件夹

在终端执行npm init -y ，进行初始package.json文件，次要信息就是name和main字段，前者是这个包的名称(也就是npm instal xxx)，后者则是咱们打包好的文件Tag文件，默认main就去找这个入口文件。

留神：包名称不能蕴含大写，包名称不能蕴含大写，包名称不能蕴含大写，重要的事件说三遍
{  "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中的函数个性么？》

参考

https://blog.csdn.net/weixin_...