很多前端开发者在学习到一定阶段后，会封装一些自己的组件并开源。笔者在学习过程中发现，发布的资源包基本上分为两类：打包发布的资源包和非打包发布的资源包。那么这两种方法有什么区别呢？它们的使用场景是什么，具体操作步骤是怎样的。本文将基于这两种发布方式，比较它们的区别，详细讲解它们的步骤，总结并解答在打包Vue组件和发布npm依赖过程中遇到的问题。相信对于更全面的了解前端工程和npm发布流程会有帮助。本文将涉及：需要被打包的Vue组件（组件）引用的第三方依赖（third-partydependencies）。测试中使用的Vue项目（projects），为了不引起下文的混淆，将以括号内的内容来指代，请读者注意区分。(1)打包发布该方法是将打包好的组件打包成js文件发布。这种方法使开发和调试更接近于前端项目。但是一旦引用了图片等静态资源，就需要通过BASE64打包成js，而字体等大型静态资源则根本无法引用。适用范围：不依赖或很少依赖第三方插件，图片组件封装，JS方法封装1.项目结构使用webpack构建前端项目。这里注意，webpack配置文件要区分开发和打包。base.js、dev.js和build.js由merge语句链接。//项目结构模块|——src||——资产||——components//组件包文件夹|||——index.js//组件包打包入口||└——componentA.vue//组件|——pages//开发时预览的页面||——路由器||——模板//html模板||——工具||——app.vue//开发时预览的v??ue入口|└——main.js//开发时预览的项目入口|——webpack//webpack配置文件夹||——base.js//通用配置||——dev.js//开发配置|└——build.js//打包配置|——package.json└——README.md2。配置webpackbase.js只放modules和通用插件等基础配置，不包含打包入口和出口。dev.js需要配置预览相关的页面，所以入口应该是最外层的main.js，这个入口文件挂在app.vue里面配置了路由信息。由于开发环境是在本地提供的，因此不需要导出信息。同时需要配置htmlWebpackPlugin和WebpackDevServer服务。varwebpack=require('webpack');config.entry={app:[path.join(APP_SRC,'main.js')],vendors:['vue','vuex','vue-router','axios']},config.entry.app.unshift("webpack-dev-server/client?http://localhost:8088/")config.plugins.push(newhtmlWebpackPlugin({hash:true,minify:{removeComments:true,collapseWhitespace:true,},//图标：path.join(APP_SRC,'/asset/images/ico.ico'),template:path.join(APP_SRC,'/template/index.html'),}))varcompiler=webpack(config);varserve=newWebpackDevServer(compiler,{quiet:false,stats:{colors:true},compress:true,//gzip压缩publicPath:'http://localhost:8088/',contentBase:'../dist/',//默认情况下，webpack-dev-server会从项目的根目录提供文件，你可以通过这个选项设置文件的目录名historyApiFallback:true,//当设置为true时，所有服务器上不存在的文件都会被重定向到/，也就是index.html文件}).listen(8088);build.js组件的入口是components目录下的index.js（index.js导入导出我们需要封装的组件）。导出信息中应包含导入包时使用的名称，组件名称不能出现大写。varconfig=require("./base.js");module.exports=merge(config,{入口:[path.join(APP_SRC,'/components/index.js')],输出:{路径:APP_DIST,filename:'index.js',library:'module_name',//使用require时指定模块名libraryTarget:'umd',//指定输出格式umdNamedDefine:true//构造UMD时会用到NameAMD模块。否则，使用匿名定义},devtool:false,mode:'production',});3.修改package.jsonpackage.json需要包含导入包的入口，包名和版本号。项目在引用组件时，会根据main找到组件入口。{"name":"my_module","version":"1.0.0","main":"dist/index.js"...}4。组件开发不用多说，只要执行npmrundev将要打包的组件引入预览页面即可进行开发调试。组件入口component/index.js需要导入导出组件，详见下一章节。5.打包发布维护版本手动修改package.json中的版本或者执行npm版本补丁生成迭代一个版本执行打包命令npmrunbuild登录npm。注意需要登录官方仓库。如果之前连接的是淘宝镜像，需要切换回来。以下是查看存储库源和切换存储库的命令。npmconfiggetregistry//查看仓库源码npmconfigsetregistryhttps://registry.npm.taobao.orgnpmconfigsetregistryhttp://registry.npmjs.org登录npm，输入账号，密码，邮箱npmloginpublishnpmpublish(2)非打包发布打包好的组件不打包直接发布。用户在引用的时候不是引用一个独立的js文件，而是用一个入口文件来引用一系列文件。由于该方法不引用单个js，可以完美解决第三方插件、图片、字体等静态文件的引用。但是对于组件项目本身，开发时的预览和调试方式需要另辟蹊径。而笔者暂时还没有想到测试方法不适用，是笔者认为比较完善的打包发布方案。1.项目结构因为不需要打包，所以不再需要webpack配置，项目结构更加细化。您可以将组件的条目移动到根目录。//项目结构模块|——src||——资产||——components//组件包文件夹|||——componentA//组件A||└——componentB.vue//组件B|└——工具|——index.js//组件入口|——package.json└——README.md2。package.json组件的名称、版本、入口文件必须有三个属性，需要注意dependencies中记录的第三方依赖会在执行npminstall时安装。{"name":"my_module","version":"1.2.16","main":"index.js","dependencies":{"view-design":"^4.0.2",...}...}3。入口文件(index.js)导入组件。使用正确的相对路径将组件和静态文件导入到index.jsimport'./src/asset/css/index.less'importComponentAfrom'./src/components/ComponentA.vue'importComponentBfrom'./src/components/ComponentB.vue'Exportobjectsforglobalinstallation如果你想通过Vue.use(MyComponent)来使用组件，你需要导出一个包含所有组件的对象，并定义这个对象的install方法来由Vue.use()方法调用。letModuleObj={ComponentA,ComponentB}letMyModule={}MyModule.install=(Vue)=>{for(letiinModuleObj){Vue.component(i,ModuleObj[i])}}exportdefaultMyModule导出多个组件支持按需加载export{ComponentA,ComponentB}4、组件开发关于引用第三方依赖以iview为例，在组件内部（components/ComponentA.vue）本地注册iview组件。这相当于按需加载，有助于减少最终项目包的大小。关于引用static文件使用正确的相对路径来引用css、图片或字体。如果你之前习惯使用webpack的别名pathalias，此时当然不会生效。5.发布不需要打包，但也需要维护版本。直接发布维护版本，手动修改package.json中的版本或者执行npmversionpatch生成迭代一个版本。登录并发布npmloginnpmpublish6。引用与开发调试由于组件项目不再具备开发调试的特性，所以需要在引用该组件的项目中对组件进行调试。安装好组件后，在node_module中找到组件所在的文件夹，输入修改即可完成调试。最后复制调试好的组件文件夹，保存package.json单独维护，发布即可。两个参考方法：//全局安装importMyModulefrom'my_module'Vue.use(MyModule)//按需加载import{ComponentA,ComponentB}from'my_module'Vue.component('ComponentA',ComponentA)Vue.component('ComponentB',ComponentB)(3)总结打包发布非打包发布webpack需要配置发布发布前不需要配置发布前需要打包引用比较小的图片可以BASE64打包只能用js文件随意引用第三方依赖是可以引用的，但是如果第三方依赖中包含很多静态文件，则可以不引用。自由参考申请文件。一个打包后的js组件的入口文件。组件项目中的node_module比较了模块中调试的两种方式。笔者更喜欢后者，但是只要了解了前端项目的引用依赖原理，就会发现两者本质上是一样的。读者可以按照Chooseaway来封装自己的需求。文中如有错误，希望大家及时指出。
