从0开始用vue-cli3创建一个leaflet地图组件npm包（1）

用过leaflet的朋友应该觉得它很好用，但同时也很麻烦，因为我们要用它需要安装很多对应的插件，而且没有官方的中文文档。只能依靠有道快译之类的软件来翻译。有幸碰到大佬翻译的文章，所以打算用vue-cli3从头搭建一个属于我们leaflet的地图组件包，把leaflet的各种插件功能集成在一起，做成第一个开箱即用本文将简要介绍如何配置以及如何上传npm包。第一步是为我们的npm包开发创建一个vue项目。1.1创建一个vue项目，为工作做准备。使用vuecreate创建一个项目。项目创建部分没做的我已经介绍多了。相信看到这篇文章的小伙伴应该能够创建我使用的配置，包括ts和router。考虑到自己虽然一直在制作npm包，但还是想在项目中测试展示给小伙伴们。为了更好的观看效果，我使用了路由器。创建的目录是1.2。更改vue目录结构。首先，我将src重命名为doc，作为以后调用组件测试和展示组件的项目。然后创建一个vue.config.js文件进行相应的配置。将entry入口改为doc文件夹constpath=require('path');constmerge=require('webpack-merge')module.exports={lintOnSave:false,pages:{index:{//页面入口entry:"doc/main.ts",//模板源模板:"public/index.html",//输出文件名filename:"index.html"}},};然后运行项目没有任何问题。第一部分准备工作完成，开始下一个任务。doc文件夹作为我们以后测试组件和展示组件的项目文件夹。第二步开始编写我们的npm内容2.1开始编写npm包接下来创建一个packages文件夹作为我们npm编写组件在packages文件夹中创建一个test文件夹作为我们的test文件夹进行简单的测试。使用测试文件夹，我创建了一个index.ts文件和src文件夹index.ts用于配置注册的组件并暴露它们。src是我们的内容文件夹。在src文件夹中，我创建了一个index.vue作为我们编写组件的地方。2.2Writeasimpledemofortestinguse//writeasimpledemoasatestusing2.3暴露组件接口在test文件夹下创建的index.ts文件中写入我们的代码，在index.ts中获取我们的src代码并将其注册为组件并将其公开name,test);};exportdefaulttest;2.4当前目录结构第三步配置全局注册组件3.1编写全局注册文件此时，虽然我们写了一个简单的demo组件，但是还是做不出来波甚至报告错误，但我们要小心。下一步更为关键。在packages文件下创建一个index.ts，获取我们的Write组件并导出//Importasinglecomponentimporttestfrom'./test'//将组件保存在数组结构中，方便遍历constcomponents=[test];//定义安装方法constinstall:any=function(Vue:any){if(install.installed）返回；install.installed=true;//遍历并注册全局组件components.map(component=>{//Vue.component(component.name,component);Vue.use(component)});};if(typeofwindow!=="undefined"&&window.Vue){install(window.Vue);}exportdefault{//导出的对象必须有一个安装方法install,//Componentlist...components};3.2完成组件的全局编写就大功告成了！接下来要做的就是先在项目中测试第四步：在项目中测试4.1在项目中测试我们的组件是否可以正常运行参考组件我们可以去我们的doc文件夹中检查我们刚刚写的测试组件是否可以可以正常使用。首先要做的是在doc/main.ts中引入我们刚刚写的组件importVuefrom"vue";importAppfrom"./App.vue";importtestfrom"../packages/index";//引入组件Vue.use(test);//注册Vue.config.productionTip=false;newVue({render:(h)=>h(App),}).$mount("#app");4.2在项目中使用刚刚编写的测试组件，因为在main中进行了全局注册，所以可以直接使用组件名#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing：抗锯齿；-moz-osx-font-smoothing：灰度；文本对齐：居中；颜色：#2c3e50；}#nav{填充：30px；{字体粗细：粗体；颜色：#2c3e50；&.router-link-exact-active{颜色：#42b983;}}}4.3查看页面介绍后，看看页面是否正确，效果是否okstyle输出是否存在，不漏一个。接下来就是将其打包成一个npm包，发布到npm上供其他人使用。第五步是配置包。添加一个lib命令"lib":"vue-cli-servicebuild--targetlib--nametest--destlibpackages/index.ts"//这个命令指定要打包到哪个文件夹和名称5.2ConfigurationRead取路径主要的。打包配置完成后，需要配置打包读取的路径。或者把package.json的main改成我们打包的js"main":"lib/test.umd.min.js",5.3全部配置5.4开始打包配置完成后我们可以直接使用yarnlib或者npmrunlib打包成npm包。我们运行打包命令就ok了。打包成功后，目录下会多出一个lib文件夹，这个文件夹就是我们的npm包。接下来就是上传到npm，供大家使用。第六步，上传到npm6.1安装nrm管理npm。接下来，我们将把它上传到npm。首先，我们需要下载一个nrm插件来管理我们的npm//使用命令全局安装nrmnpminstall-gnrm6.2简单的nrm命令nrmls//查看我们的npm列表nrmuse//切换源6.3切换到npm源首先，我们使用nrmls检查我们当前所在的源。星号是当前源。我们目前在淘宝源。我们使用nrmusenpm切换到npm源码nrmusenpm这时候我们再查看一下列表，可以看到npm前面多了一个星号，这就证明我们切换成功了。第七步，登录npm源，上传注意事项。登录成功后，我们就可以上传npmpublish了，但是在我们登录后上传之前还有一些需要注意的地方。7.2注意事项1.需要注意package.json中的“private”属性。设置为false2.每次上传都需要改版本号。只有版本号不同才能上传成功。3、命名要注意不要和别人冲突。如果要指定下载地址，需要在包前加@。4.你可以创建一个。npmignore文件会过滤掉您不想上传的文件。7.3npmpublish上传完成。折腾了这么多，终于可以上传了。我们直接使用npmpublish上传，上传成功。让我们去npm查看我们的包是否存在。八步下载，用8.1开始下载就ok了。这么久了，终于搞定了。下载并在其他项目中测试。直接npminstalllf-map-npm8.2引入使用就ok了。到这里基本就完成了。让我们在其他项目中引入它。引入我们的组件和其他项目的main.js中的组件css和注册importlfMapNpmfrom'lf-map-npm'//importcomponentsimport'lf-map-npm/lib/test.css'//引入组件cssVue.use(lfMapNpm)//在项目中你想使用的地方注册并使用它。为了方便，直接在App.vue中使用。8.3success~这次终于到了最精彩的部分，让我们带着紧张的心情来看一下页面okoksuccess没有问题。印刷风格总结。第一篇文章到此结束。本文介绍如何使用Vue编写一个npm包并上传。其实很简单。主要用到的命令有1.nrmls查看npm列表2.nrmuseswitchnpmsource3.npmlogin登录npm4.npmpublish上传到npm并修改文件夹和配置我们已经迈出了第一步，接下来我们将开始集成一个基于leaflet的开箱即用的npm包转载必须注明出处并授权npm地址npm地址https://www.npmjs.com/package/lf-map-npmhttps://www.npmjs.com/package/lf-map-npmgithub地址配置部分我放在了lib分支下需要的请到lib分支下载github地址https://github.com/dzc980812/lf-map/tree/libhttps://github.com/dzc980812/lf-map/tree/lib小伙伴有帮助。欢迎讨论，共同成长。指出缺点。如需转载，请注明出处或取得授权。