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

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

vue-cli

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

命令

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

vue-cli-servicebuild--targetlib--nameindex--destdist./src/lib/index.ts

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

参考资料vue-cli-service build。

输出

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

依赖

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

constPackageJson=require('./package.json')module.exports={configureWebpack:{externals:Object.keys(PackageJson.dependencies)}}

webpack

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

constPackageJson=require('./package.json')constPath=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:[newVueLoaderPlugin(),newCleanWebpackPlugin()],devtool:'source-map'}

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