最近几个人合作完成了一个项目，发现有一些公用的基础业务组件，可以提取出来，不仅方便大家在各自模块直接引用，也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上，避免以后小伙伴们的重复工作呢？于是乎，说干就干，在这里操练一下，写个todo-list的vue组件案例。案例源码：https://github.com/wuwhs/todolist
建立npm项目
1. 初始化npm项目
建一个文件夹（todolist），在这个文件夹路径下打开cmd窗口，输入指令npm init，前提是已经装好了node（自带npm）。
$ npm init this 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 fields and exactly what they do. use `npm install <pkg>` afterwards to install a package and save 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) todolist version: (1.0.0)
接下来提示输入版本，这里的版本将作为发布到npm上这个包版本控制号，每次发布必须要改一下版本号，才允许发布，在这里作为第一个版本可以直接回车，默认是1.0.0。
version: (1.0.0) description:
然后提示输入描述信息，描述一下这个包的功能作用。于是输入：
description: a vue component of todolist entry point:(webpack.config.js)
再者，提示整个项目的入口文件，这里是我们打包后的文件，打包后文件都放到dist目录下，先设定生成的文件是todolist.min.js，于是：
entry point:(webpack.config.js) ./dist/todolist.min.js test command: git repository:
接下来提示输入测试命令、git仓库，先不管，后面再详细写，回车默认空。
再提示输入关键字，便于其他人在npm上搜索得到你写的包，最后就是作者和认证，根据自己实际情况填。
keywords: todolist vue author: wuwhs license: (isc) about to write to d:\wampserver\wamp\www\todolist\package.json: { name: vue-todolist, version: 1.0.0, description: a vue component of todolist, main: dist/todolist.min.js, scripts: { test: echo \error: no test specified\ && exit 1 }, keywords: [ todolist, vue ], author: wuwhs, license: isc } is this ok? (yes) yes
这样，一个npm项目就初始化完了。接下来，来发布一个已经打包好了的组件包（先为空的）到npm上。
发布包到npm上
首先需要有npm官网的一个注册账号，然后输入npm adduser，依次输入npm登录账号、密码和注册激活邮箱。这样就轻松的登录上了。（ps：在window的cmd窗口，输入密码时不显示输入密码，盲输入，确定后回车即可，这里被坑了一下）
$ npm adduser username: wuwhs password: balabala... email: (this is public) balabala... logged in as wuwhs on https://registry.npmjs.org/.
最后，直接输入指令publish即可大功告成。
$ npm publish + vue-todolist@1.0.0
不过，好事多磨，可能事情没有那么顺利。
一个可能取的包名称跟别人的重名了，这样是不能上传上去的，会提示你没有权限发布这个包。
$ npm publish npm err! publish failed put 403 npm err! code e403 npm err! you do not have permission to publish vue-router. are you logged in as the correct user? : vue-router npm err! a complete log of this run can be found in: npm err! c:\users\administrator\appdata\roaming\npm-cache\_logs\2018-04-02t15_41_56_696z-debug.log
解决方法：需要到package.json里改一下包名称name，或者去npm官网搜一下你要取的名称，有没有同名，再回头来改。
还有就是每次发布，没改版本号。
$ npm publish npm err! publish failed put 403 npm err! code e403 npm err! you cannot publish over the previously published versions: 1.0.1. : vue-todolist npm err! a complete log of this run can be found in: npm err! c:\users\administrator\appdata\roaming\npm-cache\_logs\2018-04-02t15_40_28_571z-debug.log
解决方法：需要到package.json里改一下版本号后发布。
把npm线路打通了，接下来就是打包输出，上传资源了。
webpack打包
组件写好后，一般要借助自动化工具，将资源整合打包压缩，提供一个入口文件，供别人直接引用。在这里，选用webpack来打包。
为了方便演示，写一个vue官网上todo-list的例子，作为组件打包发布。
整个目录结构
--todolist --src --components --todoitem.vue --todolist.vue --app.vue --index.js --main.js --index.html --webpack.config.js --package.json --.babelrc --.npmignore
下面来分别说明文件内容：
1. package.json文件
{ name: vue-todolist, description: a vue component of todolist, version: 1.0.0, author: wuwhs, license: mit, private: false, main: ./dist/todolist.min.js, scripts: { dev: cross-env node_env=development webpack-dev-server --open --hot, build: cross-env node_env=production webpack --progress --hide-modules }, dependencies: { vue: ^2.5.11 }, browserslist: [ > 1%, last 2 versions, not ie <= 8" ], "devdependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
主要安装一些必要的依赖插件，如vue、babel和webpack
2. webpack.config.js文件
var path = require('path') var webpack = require('webpack') module.exports = { entry: './src/main.js', output: { path: path.resolve(dirname, './dist'), publicpath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devserver: { historyapifallback: true, noinfo: true, overlay: true }, performance: { hints: false }, devtool: '#eval-source-map' } if (process.env.node_env === 'production') { module.exports.devtool = '#source-map' module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.defineplugin({ 'process.env': { node_env: '"production"' } }), new webpack.optimize.uglifyjsplugin({ sourcemap: true, compress: { warnings: false } }), new webpack.loaderoptionsplugin({ minimize: true }) ]) }
webpack的基本热更新以及打包配置，可以参考webpack中文官网
3. .babelrc文件
{ "presets": [ ["env", { "modules": false }], "stage-3" ] }
es6转化工具babel配置
4. main.js项目入口文件
import vue from 'vue' import app from './app.vue' new vue({ el: '#app', render: h => h(app) })
5. app.vue vue根组件
<template> <p id="app"> hello, todo-list! </p> </template> <script> export default { name: 'app' } </script>
6. index.html 页面
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>todolist</title> </head> <body> <p id="app"></p> <script src="./dist/build.js"></script> </body> </html>
输入命令npm install，所有依赖包安装完成后，npm run dev，启动成功。
ps：遇到一个坑，先用npm install感觉太慢了，于是断掉了，用cnpm install，安装完成后，启动总是缺少这个依赖包，那个依赖包，没完没了，于是，把node_modules全删了，重新cnpm install一气呵成正常了。cnpm安装会引入一些版本文件，前面npm已装好的包没有，于是就出现了报错，找不到某某依赖包。
至此，打包工具webpack的基本配置就完成了，接下来就是写vue组件了。
写todo-list的vue组件
todo-list组件在很多地方都会作为一个案例使用，在这就直接模范vue官网的案例来写了。
1. todolist.vue组件——列表
<template> <p"> <input v-model="newtodotext" v-on:keyup.enter="addnewtodo" placeholder="add a todo" > <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </p> </template> <script> import todoitem from './todoitem' export default { components: { todoitem }, data () { return { newtodotext: '', todos: [ { id: 1, title: 'do the dishes', } ], nexttodoid: 2 } }, methods: { addnewtodo: function () { this.todos.push({ id: this.nexttodoid++, title: this.newtodotext }) this.newtodotext = '' } } } </script>
2. todolist.vue组件——列表项
减小耦合度，把列表项单独拿出来做一个组件。
<template> <li> {{ title }} <button v-on:click="$emit('remove')">x</button> </li> </template> <script> export default { props: ['title'] } </script>
3. app.vue根组件
将todo-list组件引入并挂载到根节点。
<template> <p id="app"> <todo-list></todo-list> </p> </template> <script> import todolist from './components/todolist' export default { name: 'app', components: { todolist } } </script>
刷新浏览器，查看效果
ok，组件基本完成。
组件打包
前面已经验证了，我们写的todo-list组件没问题了，要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了，把测试案例用的main.js换成index.js文件。
独立组件入口文件 index.js
目的只是将要打包的组件引入。
import todolist from './components/todolist.vue' export default todolist
更改webpack配置 webpack.config.js
将入口文件更换成./src/index.js，文件出口路径和名称更换成package.json的main的路径和名称，这样方便不调整npm的发布目录。
module.exports = { entry: './src/index.js', output: { path: path.resolve(dirname, './dist'), publicpath: '/dist/', filename: 'todolist.min.js' }, ... }
改好后，npm run build，打包组件，结果就在dist目录下有了todolist.min.js文件。这就是打包组件后的文件。也是将要发布到npm上别人真正使用的入口文件。
测试打包好的文件
刚打包好的文件能不能直接使用，在发布到npm上之前先在本地测试一下。要测试方法很简单，就是把跟组件引入的vue组件改成引入刚打包的文件。于是app.vue这样改：
<script> import todolist from '../dist/todolist.min.js' export default { name: 'app', components: { todolist } } </script>
再改回测试案例入口，刷新浏览器，报错！
vue.esm.js?3153:591 [vue warn]: failed to mount component: template or render function not defined. found in ---> <todolist> <app> at src\app.vue <root>
有点小奔溃，没有渲染函数？难道自己打包出来的组件竟然不能用！后来查资料才知道，打包需要指定一种模块输出类型，可以是commonjs,amd,script,umd模式。在这里是写插件，要采用umd模式，即librarytarget: 'umd'。于是webpack.config.js出口文件配置修改为：
output: { path: path.resolve(dirname, './dist'), publicpath: '/dist/', filename: 'todolist.min.js', library: 'vuetodolist', librarytarget: 'umd', umdnameddefine: true }
再打包独立组件，更新todolist.min.js文件，改回测试文件（entry: './src/main.js',）入口，npm run dev，刷新浏览器，成功！
发布和使用npm组件包
发布npm组件包
已经验证了我们已经打包生成的todolist.min.js可以正常使用，接下来就可以发布到npm上了，同样npm跟git一样，可以使用.npmignore忽略一些上传文件，比如node_moudules就不要上传上去了。
.ds_store node_modules/ npm-debug.log yarn-error.log # editor directories and files .idea .editorconfig *.suo *.ntvs* *.njsproj *.sln
更改一下package.json的version，执行npm publish即可
$ npm publish + vue-todolist@1.0.3
使用npm组件包
发布成功后，这就是一个平常使用的插件了，cnpm install vue-todolist --save即可安装（使用npm或cnpm安装均可）完成，
$ cnpm install vue-todolist --save √ installed 1 packages √ linked 1 latest versions √ run 0 scripts recently updated (since 2018-03-27): 1 packages (detail see file d:\appsoft\wampserver\wamp64\www\todolist\node_modules\.recently_updates.txt) today: → vue-todolist@*(1.0.3) (11:15:22) √ all packages installed (1 packages installed from npm registry, used 564ms, speed 528.68kb/s, json 2(281.56kb), tarball 16.62kb)
然后直接在页面中引入使用。
在app.vue引入todolist组件，就不需要引入本地写的了，直接引入刚才安装好的
<script> import todolist from 'vue-todolist' export default { name: 'app', components: { todolist } } </script>
再次运行npm run dev，刷新浏览器，一切正常，good。
总结
至此，打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注：
npm包配置（package.json）中，提供对外使用的入口文件最好跟打包后的文件一致，这样打包完成后就可直接测试和发布；
每次发布要改版本号；
webpack配置文件出口要加库输出类型librarytarget: 'umd';
最好单独用一个文件作为组件输出打包，不要跟测试案例入口文件弄混；
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
在vue中使用swiper插件
热模块替换有哪几种实现方法
以上就是vue todo-list组件上传npm的详细内容。