前言

最近几个人合作完成了一个项目，发现有一些公用的基础业务组件，可以提取出来，不仅方便大家在各自模块直接引用，也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上，避免以后小伙伴们的重复工作呢？于是乎，说干就干，在这里操练一下，写个todo-list的vue组件案例。案例源码：https://github.com/wuwhs/todoList

建立npm项目

1. 初始化npm项目

建一个文件夹（todoList），在这个文件夹路径下打开cmd窗口，输入指令npm init，前提是已经装好了node（自带npm）。

$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fieldsand exactly what they do.Use `npm install <pkg>` afterwards to install a package andsave it as a dependency in the package.json file.Press ^C at any time to quit.package name: (todolist)

提示输入项目包名称，这里的名称将作为发布到npm上这个包的名称，以后别人使用就可以直接import或require到项目中使用。

package name: (todolist) todolistversion: (1.0.0)

接下来提示输入版本，这里的版本将作为发布到npm上这个包版本控制号，每次发布必须要改一下版本号，才允许发布，在这里作为第一个版本可以直接回车，默认是1.0.0。

version: (1.0.0)description:

然后提示输入描述信息，描述一下这个包的功能作用。于是输入：

description: a vue component of todolistentry point:(webpack.config.js)

再者，提示整个项目的入口文件，这里是我们打包后的文件，打包后文件都放到dist目录下，先设定生成的文件是todoList.min.js，于是：

entry point:(webpack.config.js) ./dist/todoList.min.jstest command:git repository:

接下来提示输入测试命令、git仓库，先不管，后面再详细写，回车默认空。

再提示输入关键字，便于其他人在npm上搜索得到你写的包，最后就是作者和认证，根据自己实际情况填。

keywords: todolist vueauthor: wuwhslicense: (ISC)About to write to D:\WampServer\wamp\ponents: { TodoList }}</script>

再次运行npm run dev，刷新浏览器，一切正常，good。

总结

至此，打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注：

npm包配置（package.json）中，提供对外使用的入口文件最好跟打包后的文件一致，这样打包完成后就可直接测试和发布；

每次发布要改版本号；

webpack配置文件出口要加库输出类型libraryTarget: 'umd';

最好单独用一个文件作为组件输出打包，不要跟测试案例入口文件弄混；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。