前言
最近几个人合作完成了一个项目，发现有一些公用的基础业务组件，可以提取出来，不仅方便大家在各自模块直接引用，也可以在以后的项目中使用。想到了可不可以自己动手把组件打包发布到内部的npm上，避免以后小伙伴们的重复工作呢？于是乎，说干就干，在这里操练一下，写个todo-list的vue组件案例。案例源码：https://github.com/wuwhs/todoList
建立npm项目
1. 初始化npm项目
建一个文件夹（todoList），在这个文件夹路径下打开cmd窗口，输入指令npm init，前提是已经装好了node（自带npm）。
npm help json for definitive documentation on these fieldsand 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到项目中使用。
接下来提示输入版本，这里的版本将作为发布到npm上这个包版本控制号，每次发布必须要改一下版本号，才允许发布，在这里作为第一个版本可以直接回车，默认是1.0.0。
然后提示输入描述信息，描述一下这个包的功能作用。于是输入：
再者，提示整个项目的入口文件，这里是我们打包后的文件，打包后文件都放到dist目录下，先设定生成的文件是todoList.min.js，于是：
接下来提示输入测试命令、git仓库，先不管，后面再详细写，回车默认空。
再提示输入关键字，便于其他人在npm上搜索得到你写的包，最后就是作者和认证，根据自己实际情况填。
"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窗口，输入密码时不显示输入密码，盲输入，确定后回车即可，这里被坑了一下）
最后，直接输入指令publish即可大功告成。
不过，好事多磨，可能事情没有那么顺利。
一个可能取的包名称跟别人的重名了，这样是不能上传上去的，会提示你没有权限发布这个包。
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-04-02T15_41_56_696Z-debug.log
解决方法：需要到package.json里改一下包名称name，或者去npm官网搜一下你要取的名称，有没有同名，再回头来改。
还有就是每次发布，没改版本号。
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的例子，作为组件打包发布。
整个目录结构
下面来分别说明文件内容：
1. package.json文件
主要安装一些必要的依赖插件，如vue、babel和webpack
2. webpack.config.js文件
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文件
ES6转化工具babel配置
4. main.js项目入口文件
el: '#app',render: h => h(App)
})
5. App.vue vue根组件
6. index.html 页面
2. todoList.vue组件——列表项
减小耦合度，把列表项单独拿出来做一个组件。
3. App.vue根组件
将todo-list组件引入并挂载到根节点。
刷新浏览器，查看效果
OK，组件基本完成。
组件打包
前面已经验证了，我们写的todo-list组件没问题了，要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了，把测试案例用的main.js换成index.js文件。
独立组件入口文件 index.js
目的只是将要打包的组件引入。
更改webpack配置 webpack.config.js
将入口文件更换成./src/index.js，文件出口路径和名称更换成package.json的main的路径和名称，这样方便不调整npm的发布目录。
改好后，npm run build，打包组件，结果就在dist目录下有了todoList.min.js文件。这就是打包组件后的文件。也是将要发布到npm上别人真正使用的入口文件。
测试打包好的文件
刚打包好的文件能不能直接使用，在发布到npm上之前先在本地测试一下。要测试方法很简单，就是把跟组件引入的vue组件改成引入刚打包的文件。于是App.vue这样改：
再改回测试案例入口，刷新浏览器，报错！
--->
有点小奔溃，没有渲染函数？难道自己打包出来的组件竟然不能用！后来查资料才知道，打包需要指定一种模块输出类型，可以是commonjs,AMD,script,UMD模式。在这里是写插件，要采用UMD模式，即libraryTarget: 'umd'。于是webpack.config.js出口文件配置修改为：
再打包独立组件，更新todoList.min.js文件，改回测试文件（entry: './src/main.js',）入口，npm run dev，刷新浏览器，成功！
发布和使用npm组件包
发布npm组件包
已经验证了我们已经打包生成的todoList.min.js可以正常使用，接下来就可以发布到npm上了，同样npm跟git一样，可以使用.npmignore忽略一些上传文件，比如node_moudules就不要上传上去了。
.idea
.editorconfig
.suo
.ntvs
.njsproj
*.sln
更改一下package.json的version，执行npm publish即可
使用npm组件包
发布成功后，这就是一个平常使用的插件了，cnpm install vue-todolist --save即可安装（使用npm或cnpm安装均可）完成，
然后直接在页面中引入使用。
在App.vue引入todolist组件，就不需要引入本地写的了，直接引入刚才安装好的
再次运行npm run dev，刷新浏览器，一切正常，good。
总结
至此，打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注：
- npm包配置（
package.json）中，提供对外使用的入口文件最好跟打包后的文件一致，这样打包完成后就可直接测试和发布； - 每次发布要改版本号；
webpack配置文件出口要加库输出类型libraryTarget: 'umd';- 最好单独用一个文件作为组件输出打包，不要跟测试案例入口文件弄混；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。