基于webpack的vue项目发布自己封装组件到npm上,其他人通过命令进行安装使用

本文主要讲解如何将自己写的组件集成到npm上，然后通过命令行进行安装插件使用。
1、在src下创建一个文件夹plugins，将自己写的组件都复制到这个文件夹下面。如下图所示，index.js为入口文件。

想了解index.js的代码可以看上一篇文章https://blog.youkuaiyun.com/CuiCui_web/article/details/106181231

2、在webpack.base.conf.js文件中进行修改，文件目录如下图所示：


将原来的app:'./src/main.js' 改为 app:process.env.NODE_ENV === 'production'? './src/plugins/index.js': './src/main.js'

3、在上述图片目录下另一个文件中 webpack.prod.conf.js下进行更改：
第一步：

 output: {
    path: config.build.assetsRoot,
    // filename: utils.assetsPath('js/[name].[chunkhash].js'), //注释
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')//注释
    filename:'vue-plugins-msg-button-c.min.js',//名字为插件名，尾缀为.min.js
    library:'vue-plugins-msg-button-c', // 名字为插件名
    libraryTarget:'umd',
    umdNamedDefine:true
  },

第二步：

注释原来的filename，修改生产环境的样式文件，打包后所有的样式都会在这个文件下。

new ExtractTextPlugin({
      filename:'vue-plugins-msg-button-c.min.css', // 插件名字
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),

第三步注释下面方法

// new webpack.optimize.CommonsChunkPlugin({
      // 变更
      // name: 'vendor',
      // minChunks (module) {
      //   // any required modules inside node_modules are extracted to vendor
      //   return (
      //     module.resource &&
      //     /\.js$/.test(module.resource) &&
      //     module.resource.indexOf(
      //       path.join(__dirname, '../node_modules')
      //     ) === 0
      //   )
      // }
    // }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    // new webpack.optimize.CommonsChunkPlugin({
      // 变更
      // name: 'manifest',
      // minChunks: Infinity
    // }),

new HtmlWebpackPlugin({
      // 变更
      // filename: config.build.index,
      // template: 'index.html',
      // inject: true,
      // minify: {
      //   removeComments: true,
      //   collapseWhitespace: true,
      //   removeAttributeQuotes: true
      //   // more options:
      //   // https://github.com/kangax/html-minifier#options-quick-reference
      // },
      // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // chunksSortMode: 'dependency'
    }),

4、在package.json文件中进行修改

5、npm run build 进行打包。
打包成功后，显示如下图所示，就是正确的。以你写的插件名为名字的文件

6、npm官网 注册自己的账号
然后在编辑器中输入 npm login 进行登录
注意： 输入密码的时候，没有反应是正常的。

7、发版 输入命令：npm publish
如果报错如下图所示：

出现原因：使用的是淘宝源cnpm,登陆到的是cnpm
解决方法：切换到npm.js的网址，代码如下

输入命令：npm config set registry http://registry.npmjs.org/

然后再重新 npm login
npm publish
最后显示下图所示就是正常了

最后我们可以在浏览器中登录npm官网，查看我们自己的插件啦。然后通过命令进行安装使用

本文插件只是做一个测试使用。后续持续更新封装组件的案例。谢谢！