前言：工作的时候总是使用别人的npm包，然而我有时心底会好奇自己如何发布一个npm包呢，什么时候自己的包能够被很多人喜欢并使用呢…今天我终于迈出了第一步。
前提：会使用 npm，有 vue 基础，了解一点 webpack
Are you ready? Go!
目录
1. 新建一个空文件夹
2. 进入文件夹，终端(cmd)运行 npm init
完成后会在目录下生成一个 package.json 文件
我们可以根据自己的需要补充文件内容
这是我的：
1 { 2 \"name\": \"bing-test-publish-npm\", 3 \"version\": \"1.0.0\", 4 \"description\": \"布一个npm包\", 5 \"main\": \"index.js\", 6 \"scripts\": { 7 \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\", 8 \"start\": \"webpack-dev-server --hot --inline\", 9 \"build\": \"webpack --display-error-details --config webpack.config.js\" 10 }, 11 \"author\": \"bing\", 12 \"license\": \"ISC\", 13 \"devDependencies\": { 14 \"babel-core\": \"^6.26.0\", 15 \"babel-loader\": \"^7.1.2\", 16 \"babel-plugin-transform-object-rest-spread\": \"^6.26.0\", 17 \"babel-plugin-transform-runtime\": \"^6.23.0\", 18 \"babel-polyfill\": \"^6.26.0\", 19 \"babel-preset-es2015\": \"^6.24.1\", 20 \"css-loader\": \"^0.28.7\", 21 \"es6-promise\": \"^4.1.1\", 22 \"less\": \"^2.7.3\", 23 \"less-loader\": \"^4.0.5\", 24 \"style-loader\": \"^0.19.0\", 25 \"url-loader\": \"^0.6.2\", 26 \"vue\": \"^2.5.9\", 27 \"vue-hot-reload-api\": \"^2.2.4\", 28 \"vue-html-loader\": \"^1.2.4\", 29 \"vue-loader\": \"^13.5.0\", 30 \"vue-router\": \"^3.0.1\", 31 \"vue-style-loader\": \"^3.0.3\", 32 \"vue-template-compiler\": \"^2.5.9\", 33 \"vuex\": \"^3.0.1\", 34 \"webpack\": \"^3.9.1\", 35 \"webpack-dev-server\": \"^2.9.5\" 36 } 37 }
3. 配置完后，命令行运行 npm install 安装依赖包，安装完会生成一个node_modules目录
4. 接下来新建两个文件夹 src(开发目录)，dist(发布目录)
5. 然后我们就可以在 src 目录下编写自己的组件吧
我的文件目录
app.vue
1 <template> 2 <div class=\"helloName\"> 3 <input type=\"text\" placeholder=\"请输入姓名\" v-model=\"yourName\"></input> 4 <div v-if=\"name\">hello<span class=\"name\">{{name}}!</span></div> 5 </div> 6 </template> 7 <script> 8 export default { 9 name:\'helloName\', 10 data () { 11 return { 12 yourName: \'\' 13 } 14 }, 15 methods: { 16 17 }, 18 created(){ 19 } 20 } 21 </script> 22 <style> 23 </style>
index.js
1 import helloName from \'./app.vue\' 2 export default helloName
webpack.dev.conf.js
1 const path = require(\"path\"); 2 const webpack = require(\"webpack\"); 3 const uglify = require(\"uglifyjs-webpack-plugin\"); 4 5 module.exports = { 6 devtool: \'source-map\', 7 entry: \"./src/index.js\",//入口文件，src目录下的index.js文件， 8 output: { 9 path: path.resolve(__dirname, \'./dist\'),//输出路径，就是新建的dist目录， 10 publicPath: \'/dist/\', 11 filename: \'helloName.min.js\', 12 libraryTarget: \'umd\', 13 umdNamedDefine: true 14 }, 15 module: { 16 rules: [{ 17 test: /\\.vue$/, 18 loader: \'vue-loader\' 19 }, 20 { 21 test: /\\.less$/, 22 use: [ 23 { loader: \"style-loader\" }, 24 { loader: \"css-loader\" }, 25 { loader: \"less-loader\" } 26 ] 27 }, 28 { 29 test: /\\.js$/, 30 exclude: /node_modules|vue\\/dist|vue-router\\/|vue-loader\\/|vue-hot-reload-api\\//, 31 loader: \'babel-loader\' 32 }, 33 { 34 test: /\\.(png|jpg|gif|ttf|svg|woff|eot)$/, 35 loader: \'url-loader\', 36 query: { 37 limit: 30000, 38 name: \'[name].[ext]?[hash]\' 39 } 40 } 41 ] 42 }, 43 plugins: [ 44 new webpack.DefinePlugin({ 45 \"process.env\": { 46 NODE_ENV: JSON.stringify(\"production\") 47 } 48 }) 49 ] 50 }
文件写好后，我们运行 npm run build，结果是会在 dist 目录下生成一个 helloName.min.js，就是我们在 webpack.dev.conf.js 中 filename 的值
6. 将 package.json 中的 main 字段指向新生成的 helloName.min.js
7. 新建一个 .npmignore 文件（npm忽略文件），可以把不需要发布的文件忽略，如果只有 .gitignore，没有 .npmignore，则会使用 .gitignore
如：
.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js
1. 到 https://www.npmjs.com 注册一个账号
2. 进入你的项目根目录，运行 npm login
会输入你的用户名、密码和邮箱
3. 登录成功后，执行 npm publish，就发布成功啦，我们可以在官网看到
接下来我们在其他项目中使用自己刚发布的npm包
1. 我们进入我们的项目目录运行 npm (或cnpm) install bing-test-publish-npm(我们刚发布的包)
2. 在需要使用此包的页面引入，并使用
1 <template> 2 <div> 3 我的npm包 4 <helloName></helloName> 5 </div> 6 </template> 7 <script> 8 import helloName from \'bing-test-publish-npm\' 9 export default { 10 name: \'npm\', 11 data () { 12 return { 13 } 14 }, 15 components: { 16 helloName 17 } 18 } 19 </script>
这时我发现我的控制台报错了，原来是编码错误，因此，我们需要修改更新代码
<template> <div class=\"helloName\"> <input type=\"text\" placeholder=\"请输入姓名\" v-model=\"yourName\"></input> <div v-if=\"yourName\">hello<span class=\"name\">{{yourName}}!</span></div> </div> </template> <script> export default { name:\'helloName\', data () { return { yourName: \'\' } }, methods: { }, created(){ } } </script> <style> </style>
1. 修改完代码后，我们需要修改 package.json 的version版本
规则：对于\”version\”:\”x.y.z\”
1.修复bug,小改动，增加z
2.增加了新特性，但仍能向后兼容，增加y
3.有很大的改动，无法向后兼容,增加x
2. 修改后 运行 npm run build, npm publish 就成功更新了包的版本
3. 使用时需要
卸载之前安装的包 npm uninstall bing-test-publish-npm
重新安装 npm install bing-test-publish-npm
可通过 npm list bing-test-publish-npm 查看到版本已是最新的版本
主要参考文章
1. 如何制作并发布一个vue的组件npm包？ https://blog.csdn.net/hamupp/article/details/79337643
2. package.json http://javascript.ruanyifeng.com/nodejs/packagejson.html
~~~~~~~~~~~~~~~~~~~~~~~我是简朴又廉价的分割线~~~~~~~~~~~~~~
饼饼有话说：
写的好辛苦呀
说实话这个编辑器不咋好用。。
花了好半天写文章，又花了一会修改文章格式，这次给自己认真程度打80分吧，想要写一篇优秀的博文好不容易呀，我会继续加油哒~~
如果觉得受用的话，可不可以给我点个赞呀，激励这个拖延症患者~~
