基于vue如何发布⼀个npm包的⽅法步骤
前⾔：⼯作的时候总是使⽤别⼈的npm包，然⽽我有时⼼底会好奇⾃⼰如何发布⼀个npm包呢，什么时候⾃⼰的包能够被很多⼈喜欢并使⽤呢...今天我终于迈出了第⼀步。
前提：会使⽤ npm，有 vue 基础，了解⼀点 webpackAre you ready? Go!⼀、编写⾃⼰的npm包1. 新建⼀个空⽂件夹
2. 进⼊⽂件夹，终端(cmd)运⾏ npm init
完成后会在⽬录下⽣成⼀个 package.json ⽂件我们可以根据⾃⼰的需要补充⽂件内容这是我的：
{
\"name\": \"bing-test-publish-npm\ \"version\": \"1.0.0\
\"description\": \"布⼀个npm包\ \"main\": \"index.js\ \"scripts\": {
\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\ \"start\": \"webpack-dev-server --hot --inline\
\"build\": \"webpack --display-error-details --config webpack.config.js\" },
\"author\": \"bing\ \"license\": \"ISC\
\"devDependencies\": { \"babel-core\": \"^6.26.0\ \"babel-loader\": \"^7.1.2\
\"babel-plugin-transform-object-rest-spread\": \"^6.26.0\ \"babel-plugin-transform-runtime\": \"^6.23.0\
\"babel-polyfill\": \"^6.26.0\
\"babel-preset-es2015\": \"^6.24.1\ \"css-loader\": \"^0.28.7\ \"es6-promise\": \"^4.1.1\ \"less\": \"^2.7.3\
\"less-loader\": \"^4.0.5\ \"style-loader\": \"^0.19.0\ \"url-loader\": \"^0.6.2\ \"vue\": \"^2.5.9\
\"vue-hot-reload-api\": \"^2.2.4\ \"vue-html-loader\": \"^1.2.4\ \"vue-loader\": \"^13.5.0\ \"vue-router\": \"^3.0.1\
\"vue-style-loader\": \"^3.0.3\
\"vue-template-compiler\": \"^2.5.9\ \"vuex\": \"^3.0.1\ \"webpack\": \"^3.9.1\
\"webpack-dev-server\": \"^2.9.5\" }}
3. 配置完后，命令⾏运⾏ npm install 安装依赖包，安装完会⽣成⼀个node_modules⽬录4. 接下来新建两个⽂件夹 src(开发⽬录)，dist(发布⽬录)5. 然后我们就可以在 src ⽬录下编写⾃⼰的组件吧我的⽂件⽬录
app.vue
index.js
import helloName from './app.vue'export default helloName
webpack.dev.conf.js
const path = require(\"path\");
const webpack = require(\"webpack\");
const uglify = require(\"uglifyjs-webpack-plugin\");
module.exports = { devtool: 'source-map',
entry: \"./src/index.js\⼊⼝⽂件，src⽬录下的index.js⽂件， output: {
path: path.resolve(__dirname, './dist'),//输出路径，就是新建的dist⽬录， publicPath: '/dist/',
filename: 'helloName.min.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]' } } ] },
plugins: [
new webpack.DefinePlugin({ \"process.env\": {
NODE_ENV: JSON.stringify(\"production\") } }) ]}
⽂件写好后，我们运⾏ 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*.ymlbuild/
node_modules/src/test/
gulpfile.js
⼆、发布npm包
2. 进⼊你的项⽬根⽬录，运⾏ npm login会输⼊你的⽤户名、密码和邮箱
3. 登录成功后，执⾏ npm publish，就发布成功啦，我们可以在官⽹看到
三、使⽤⾃⼰的npm包
接下来我们在其他项⽬中使⽤⾃⼰刚发布的npm包
1. 我们进⼊我们的项⽬⽬录运⾏ npm(或cnpm) installbing-test-publish-npm(我们刚发布的包)
2. 在需要使⽤此包的页⾯引⼊，并使⽤
这时我发现我的控制台报错了，原来是编码错误，因此，我们需要修改更新代码
四、更新npm包
1. 修改完代码后，我们需要修改 package.json 的version版本规则：对于\"version\":\"x.y.z\"
1.修复bug,⼩改动，增加z
2.增加了新特性，但仍能向后兼容，增加y
3.有很⼤的改动，⽆法向后兼容,增加x
2. 修改后 运⾏ npm run build, npm publish 就成功更新了包的版本3. 使⽤时需要
卸载之前安装的包 npm uninstallbing-test-publish-npm重新安装 npm installbing-test-publish-npm
可通过 npm listbing-test-publish-npm 查看到版本已是最新的版本五、最终效果
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
