封装组件库让我们在之后的工作中可以复用现成的代码，同时保持了组件的稳定性。

本文简要概述了封装Vue组件库的2种方法：vue-cli、webpack。

vue-cli

vue-cli自带编译为库的功能。

命令

编写好源码后，执行命令：

vue-cli-service build --target lib --name index --dest dist ./src/lib/index.ts

--name参数设置库的名字，--dest参数设置生成文件的保存目录，./src/lib/index.ts表示入口文件。

参考资料vue-cli-service build。

输出

这个命令在dist目录中生成了CJS和UMD的文件，同时CSS也被处理出称为一个单独的文件。

依赖

vue-cli没有配置好组件库的外部依赖，我们需要在vue.config.js中设置。

const PackageJson = require('./package.json')

module.exports = {
  configureWebpack: {
    externals: Object.keys(PackageJson.dependencies)
  }
}

webpack

Webpack打包组件库的方式与打包应用方式类似，除了我们需要设置library属性。示例：

const PackageJson = require('./package.json')
const Path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  mode: 'production',
  entry: Path.resolve(__dirname, './src/index.ts'),
  output: {
    path: Path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: {
      type: 'commonjs'
    }
  },
  externals: Object.keys(PackageJson.dependencies),
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts', '.scss'],
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(t|j)s$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [new VueLoaderPlugin(), new CleanWebpackPlugin()],
  devtool: 'source-map'
}

output.library.type属性用于配置生成的目标模块类型。