vue封裝自定義組件，打包發佈到npm上使用

封裝vue組件庫有2種形式：

1、使用 webpack-simple 模板，沒有vue-router的中間件，不需要路由時推薦使用，同時 webpack-simple 沒有格式的檢測

2、使用 webpack 模板

┌─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

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

路徑是指壓縮包所在的絕對路徑，文件名必須是壓縮包的全名

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 [email protected] 刪除某個版本
2、npm unpublish xx-btn --force 刪除整個npm市場的包

不過撤包推薦用法：

npm unpublish的推薦替代命令：

npm deprecate <pkg>[@<version>] <message>

使用這個命令，並不會在社區裏撤銷你已有的包，但會在任何人嘗試安裝這個包的時候得到警告

例如：

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