如何快速的将vue组件发布npm包

墓中无人
3,236 阅读5分钟

组件化开发，开发的轮子怎么更好的复用？发布npm包，想用即用信手捏来。手把手教你发布vue组件的npm包。

背景

前端组件化开发，已经有了多年的历史，不论是服务端渲染，还是前端SPA，都有了相对成熟的组件化开发方案。随着前端生态 less、scss、typeScript、webpack、vite等工具的完善，前端的组件化开发效率已经有了很大的提升。前端社区中贡献了很多不错的前端组件，基本上都提供开箱即用的方案，使得更好的发挥组件化的优势。你造组件有没有贡献给他人呢。通过这篇文章可以让你的组件与前端同学一起共享，共享我们的技术共享我们的收获。

主要内容

  • vue组件包开发
  • npm包发布

一、npm包要实现的目标

一个简单的confirm组件：自定义标题、提示内容、取消和确认事件。我们在使用时候npm install组件后可以这样调用。 点击显示survey-confirm后，显示出我们自定义内容的confirm，取消确定有对应的回调事件。

<template>
    <div class="demo-wrap">
        <button @click="showConfirm = true">
            显示survey-confirm
        </button>
        <survey-confirm
            v-if="showConfirm"
            :title="confirmTitle"
            :content="confirmContent"
            @confirm="showConfirm = false"
            @cancel="showConfirm = false"
        />
    </div>
</template>
<script>
    import surveyConfirm from 'survey-vue-confirm';
    export default {
        components: {
            surveyConfirm
        },
        data(){
            return {
                showConfirm: false,
                confirmTitle: '测试survey-vue-confirm标题',
                confirmContent: '测试survey-vue-confirmn内容',
            }
        },
    }
</script>

然后在网页上显示 demo.gif 为了目标开始开发我们的npm包

二、新建npm包文件

为了确保name不会与其他的npm包重名，我们先到www.npmjs.com/搜一下。如果名称重复在发npm包的时候会失败。 新建一个空文件夹survey−vue−confirm\color{red}{survey-vue-confirm}, 进入到当前目录（survey-vue-confirm）下。初始化项目

npm init

初始化项目会让你填一些项目相关的信息，跟着提示一步一步填写或者全部跳过也可以。这一步完成后，会生成package.json文件。

下表初始化时候的一些信息
字段含义
name发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
version你这个包的版本，默认是1.0.0。对于npm包的版本号有着一系列的规则，模块的版本号采用X.Y.Z的格式，具体体现为：1、修复bug，小改动，增加z。2、增加新特性，可向后兼容，增加y。3、有很大的改动，无法向下兼容,增加x
description项目简介
mian入口文件，默认是Index.js，可以修改成自己的文件
scripts包含各种脚本执行命令
test测试命令
author自己的账号名
license这个直接回车，开源文件协议吧，也可以是MIT，看需要吧。

三、安装相关依赖

我们在开发组件时会用到vue es6 webpack等所以我们在devDependencies中安装这几个相应的依赖。 修改package.json\color{red}{package.json}然后执行npm install，下载这些依赖包。 package.json

{
	"devDependencies": {
            "babel-loader": "^7.1.2",
            "css-loader": "^0.28.7",
            "less": "^2.7.3",
            "less-loader": "^4.0.5",
            "style-loader": "^0.19.0",
            "url-loader": "^0.6.2",
            "vue": "^2.5.9",
            "vue-loader": "^13.5.0",
            "vue-style-loader": "^3.0.3",
            "vue-template-compiler": "^2.5.9",
            "webpack": "^3.9.1"
	}
}

四、目录结构及基本代码

4.目录结构

   survey-vue-confirm
    |---dist: 打包后的实体文件
    |---node_modules: webpack配置文件
    |---src: 源代码目录
        |---app: 组件
        |---index: build入口文件
    |---package.json
    |---README: 说明文档
    |---webpack.config: webpack配置文件

app.vue(基本操作)

<template>
    <div class="survey-vue-confirm">
        <div class="confirm-wrap">
            <div class="confirm-title" v-html="title">
            </div>
            <div class="close-btn" @click="doCancel"></div>
            <div class="confirm-content" v-html="content">
            </div>
            <div class="confirm-footer">
                <span class="cancel-btn" @click="doCancel">取消</span>
                <span class="confirm-btn" @click="doConfirm">确定</span>
            </div>
        </div>
    </div>
</template>
// js less 代码就不粘了npm install 可以查看全部代码

index.js(这里主要是把组件export出去)：

import surveyVueConfirm from './app.vue'
export default surveyVueConfirm;

五、webpack打包配置：

webpack.config.js里添加如下代码


const path = require("path");
module.exports = {
    entry: "./src/index.js",//入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//输出路径
        publicPath: '/dist/',
        filename: 'survey-vue-confirm.js',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
                loader: 'babel-loader'
            },
            {
                test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
                loader: 'url-loader',
                query: {
                    limit: 30000,
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
}

package.json 中添加 build

"scripts": {
	 "build": "webpack --display-error-details --config webpack.config.js"
}

然后执行npm run build，就会在dist目录下生成survey-vue-confirm.js。这即是我们这个npm包的主文件。 修改package.json中的main字段中指向的主文件信息 package.json

{
	"main": "./dist/survey-vue-confirm.js",
}

至此，一个npm组件包就做完了。

测试好就可以发包了

六、发布到npm上的流程

1.如没有npm账号，先注册个账号。
2.进入到项目的根目录下，运行 npm login

根据提示输入 用户名，密码和邮箱

3.执行npm publish 发布

发布成功后如下图 200.jpg 发布成功后，这个npm包就在npm官网上了。可以直接用下面的命令来下载啦。

npm install survey-vue-confirm --save
4.撤回发布的版本

如果发现发布的版本有错误24小时内可以撤回，撤回时要指定包的名字和版本。否则会报错

npm unpublish survey-vue-confirm@1.0.1
5.常见报错：
ERR! code E400

400.jpg 版本问题，修改package.json的version即可

ERR! code E401

401.jpg npm源设置成第三方源的时候才有可能发生，比如设置了淘宝源就可能会导致该问题。只要把源改回默认的就可以了，如下

npm config set registry http://registry.npmjs.org
ERR! code E403

403.jpg 包名重复 修改名字重新发布即可

总结

组件化开发既可以提升开发效率也可以提高代码的可读性，发布npm包是组件化开发的一个升华。发布npm包可以使我们开发变得便捷同时也能让我开发出来的组件积累起来，更好的复用。只要能提取出来的东西都可以发布npm包，本文仅简单介绍了vue组件发布npm包的一个简单demo。本文只是抛砖引玉，大家有什么好的学习方法可以留言，一起学习，共同进步。

avatar
文章
阅读
粉丝