vue封装自定义组件，打包发布到npm上使用

前言：文章是转载的，仅为记录项目中遇到的问题

封装vue组件库有2种形式：

1、使用 webpack-simple 模板，没有vue-router的中间件，不需要路由时推荐使用，同时 webpack-simple 没有格式的检测，适合小型项目

2、使用 webpack 模板，适合中大型项目，默认提供了很多的webpack的配置，也更加的方便你对代理(跨域)、最终打包资源放到服务器什么目录、以及js、css、img和项目在打包过程等优化的配置等等

┌─testNpm                       项目主目录
├─ src 
│    └─ components              存放所有自定义组件目录
│           ├─ xx-btn           单个自定义组件目录
│           └─ index.js         组件库入口文件
├─ dist                         编译打包生成的文件目录
├─ package.json                 webpack配置文件
├─ webpack.config.js            webpack-simple的时候生成
└─ build                        webpack模式时生成的目录，webpack-simple没有
    ├─ webpack.base.conf.js
    └─ webpack.prod.conf.js

一、webpack-simple
1、新建一个 vue 项目

vue init webpack-simple

然后再

 npm install 

初始化一下依赖

2、在新建的项目的src目录下新建一个目录（components）用来存放所有自定义组件源码

src/components/xx-btn/xx-btn.vue

3、组件封装好后在组件目录（components）下新建一个index.js文件，为组件库的入口文件

src/components/index.js

// 导入封装的组件
原作者使用方式：

import xxBtn from './xx-btn.vue'
 
const components = {
  // 通过install来安装组件
  install(Vue) {
    Vue.component(
      'xxBtn', xxBtn
    )
  }
}
 
// 注意这里的判断，很重要
if(typeof windwo !== 'undefined' && window.Vue) {
  window.Vue.use(comment)
}
 
// 导出组件库
export default components

el-ui的使用方式：

import xxBtn from './xxBtn'

xxBtn.install = function(Vue){
    Vue.component(xxBtn.name,xxBtn)
}

export default xxBtn

4、修改package.json文件

{
  "name": "xx-btn", // 发布的模块名称，发布线上后，可以通过npm install xx-btn来引用该模块，一般Vue组件以vue-开头
  "description": "test npm", // 组件库描述
  "version": "1.0.0", // 版本号
  "author": "xxx", // 作者
  "license": "MIT", // 代码授权许可
  "private": false, // 公开项目，因为组件包是公用的，所以private要改为false
  
  "scripts": { // 运行命令
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  
  "main": "dist/xx-btn.min.js", // 打包后的入口文件，若不配置，则在其他项目中就无法使用import xx from '包名'来引入组件，只能以包名作为起点来指定相对路径
  
  "keywords": [ // 关键词，可以通过npm搜索你填写的关键词找到你的模块
    "xx-btn",
    "components"
  ],
  
  "files": [ // 指定打包后发布到npm的文件，没指定则不传，package.json是默认上传的
    "dist",
    "src/components"
  ],
 
  
  "homepage": "https://xx.github.io/xx/xx-btn/dist/index.html", // 项目官网的url
  
  "bugs": { // 填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
    "url": "https://github.com/xx/xx-btn/issues"
  },
  
  "repository": { // 指定代码所在的仓库地址
    "type": "git",
    "url": "https://github.com/xx/xx-btn.git"
  },
  
  ...
}

5、修改webpack.config.js文件

// entry: "./src/main.js",
entry: "./src/components/xx-btn/xx-btn.js", // 入口文件
 
output: { // 修改输出文件到 dist 下
 
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  
  // filename: 'build.js'
  filename: "xx-btn.min.js", // 生成的文件名
  library: "xx-btn", // 指定的就是你使用require时的模块名
  libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
  umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},

6、编译打包，生成的文件在dist目录下

npm run build

7、测试插件

npm pack
npm pack 之后，会在当前目录下生成一个 xx-btn-1.0.0.tgz 的文件。

打开一个vue项目，将压缩文件放到项目某个目录下，执行命令

npm install 路径\xx-btn-1.0.0.tgz

路径是指压缩包所在的绝对路径，文件名必须是压缩包的全名

注：每次测试都一定要build再pack，不能直接pack

8、安装好插件后，在项目的入口文件main.js里引入使用

import xxBtn from 'xx-btn'
 
Vue.use(xxBtn)

之后就可以在项目的任意组件中引用就行了，如果引入成功，则说明打包成功，接下来就是发布到npm上了

9、发布npm
1、先到NPM官网注册账号，如果已有账号则跳过此步骤

2、在组件库项目的根目录下执行

npm login

登陆账号，输入你的账号和密码，并验证邮箱地址，登陆成功后则可以发布到NPM网站了

3、更新版本号

npm version patch

这是把版本迭代一级，每次更新时都需要输入这个命令，或者直接在package.json中修改版本号，只要与npm上的版本不同就行

4、发布到npm官网

npm publish --access public

5、撤销发布的包

npm unpublish

例如：

1、npm unpublish xx-btn@1.0.0 删除某个版本
2、npm unpublish xx-btn --force 删除整个npm市场的包
不过撤包推荐用法：

npm unpublish的推荐替代命令：

npm deprecate [@]
使用这个命令，并不会在社区里撤销你已有的包，但会在任何人尝试安装这个包的时候得到警告

例如：

npm deprecate xx-btn ‘这个包我已经不再维护了哟～’

【注意】如果报权限方面的错，加上–force

二、webpack
1、新建一个 vue 项目

vue init webpack

2、同上2
3、同上3
4、修改webpack.base.conf.js文件

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: process.env.NODE_ENV === 'production' ? './src/components/xx-btn/index.js' : './src/main.js'
  },
  
  ...
}

5、修改webpack.prod.conf.js文件

const webpackConfig = merge(baseWebpackConfig, {
 ...,
 
  output: {
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    
    filename: "xx-btn.min.js", // 生成的文件名
    library: "xx-btn", // 指定的就是你使用require时的模块名
    libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  
   plugins: [
    new ExtractTextPlugin({
        // 打包后所有的样式都会在这个文件下
        filename: 'xx-btn.min.css'
    }),
    
    // 以下的2个是要注释掉的，不然npm run build 打包时会失败
    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
         )
       }
    }),
    
    new webpack.optimize.CommonsChunkPlugin({
       name: 'manifest',
       minChunks: Infinity
    }),
    
    // 这个可以注释也可以不注释，全部注释的话打包后不会产生index.html文件
    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : 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'
    }),
    
   ]
  
}

6、同上4
7、同上6、7
8、安装好插件后，在项目的入口文件main.js里引入使用

import xxBtn from 'xx-btn'
import 'xx-btn/dist/xx-btn.min.css'
 
Vue.use(xxBtn)

注意：因为css是全部单独打包到xx-btn.min.css文件，所以我们在引入插件使用的时候还要记得css也一并要引入，不然样式会丢失

9、同上9
————————————————
转载自「不怕麻烦的鹿丸」
原文链接：https://blog.csdn.net/qq_31851435/article/details/106647833