npm插件打包及发布流程

npmjs网址

地址: www.npmjs.com/
发布插件需先在此网站注册账号

第一步：初始化项目

需创建一个空项目，用来打包插件
使用 vue init webpack-simple project-name 初始化项目

此处使用vue init webpack-simple,而非vue init webpack是为了生成的项目配置更简洁，因为只是打包插件使用，配置项越多，改起来就越麻烦,webpack-simple就够了，初始化项目此步略过，一顿噼里啪啦的操作即可

第二步：修改项目目录

我删除了src目录下多余文件，此处写的插件是基于vue的一个工具类插件，不需要多余的文件(可依据个人需求，进行此操作)

1. 删除多余文件（此图为初始化项目后生成的文件目录）红框中是删除的文件
   
2. 在src目录下新建index.js文件
   

第三步：编写插件，修改项目配置

1. index.js中编写自己的插件

export default {
  install: function (Vue, options) {
    // 邮箱验证
    Vue.prototype.$isEmail = (s) => {
      return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
    }
  }
}

2. 修改webpack.config.js文件
   
   

entry: './src/index.js', // 入口
output: {
  path: path.resolve(__dirname, './dist'), // 所有输出文件的目标路径
  publicPath: '/dist/', // 输出解析文件的目录，指定资源文件引用的目录
  filename: 'vue-basic-tool.js', // 打包后的文件名
  library: 'vue-basic-tool', // 配置导出库的名称，如使用require引入，这里就是require("vue-basic-tool")
  libraryTarget: 'umd', // 配置以何种方式导出库
  umdNamedDefine: true
},

3. 修改package.json文件
   
   

"name": "vue-basic-tool", // 项目名，不能有重复
"main": "dist/vue-basic-tool.js", // 引入时可直接使用包名

第四步：打包及发布

1. 在npmjs注册一个账号
2. 在当前组件的终端中输入 npm run build 先进行打包
   
3. 在此终端输入 npm login 或 npm login --registry registry.npmjs.org 进行登陆操作
   
   
4. 在此终端输入 npm publish 或 npm publish --registry registry.npmjs.org 进行发布操作
   
5. 发布成功后，查看插件
   在npmjs官网登陆账号点击头像，选择packages，查看自己发布的包点击包名，可查看关于包的一些相关信息
   
   

第五步：版本更新

每次更新后发布时，需手动修改package.json文件中的version版本号，否则会导致发布失败