关于前端:从0开始用vuecli3打造一个leaflet的地图组件npm包一

介绍

应用过leaflet的小伙伴应该都感觉他十分好用 但同时也十分麻烦 因为须要装置许多咱们想应用的对应插件 并且都没有官网的中文文档 只能靠着 有道快译 等软件去翻译 可能有时候运气好能碰到大佬翻译过的文章 所以我打算应用vue-cli3从零开始 打造一个属于咱们的 leaflet的地图组件包 将leaflet的各种插件性能集成到一起 做到开箱即用

第一篇 会大体简略的写一下如何配置如何上传npm包

第一步 咱们先来创立一个vue我的项目用来做咱们的npm包开发

1.1 创立vue我的项目 做筹备工作

应用vue create 来创立我的项目 创立我的项目局部不做过多介绍了 置信来看这篇文章的小伙伴都应该会创立 我采纳的配置有ts和router 因为思考到尽管做npm包以来 然而我还想做到 在我的项目里进行测试和展现 进行让小伙伴们更好的观看成果 所以用到了router
创立后的目录为

1.2 更改vue目录构造

首先我将src改名成为了doc 作为当前调用组件测试和展现组件的我的项目
而后创立一个vue.config.js文件 进行对应的配置 将entry入口更改为doc文件夹下

const path = require('path');const merge = require('webpack-merge')module.exports = {  lintOnSave: false,  pages: {    index: {      // page 的入口      entry: "doc/main.ts",      // 模板起源      template: "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.2 写一个简略的demo 作为测试应用

// 写了一个简略的demo 作为测试应用<template>    <div class="test">        test component    </div></template><script>export default {    name: "test",    options: {        name: "test",    },    created() {        console.log("created,测试咱们的test组件");    },};</script><style>.test {    color: red;}</style>

2.3 裸露组件

接下来在test文件夹下创立的index.ts文件里编写咱们的代码 在index.ts中获取咱们src的代码 而后注册为一个组件并裸露进来

import test from "./src/index.vue";/* istanbul ignore next */(test as any).install = function(Vue: any) {    Vue.component(test.name, test);};export default test;

2.4 当前目录构造

第三步 配置全局注册组件

3.1 编写全局注册文件

此时尽管咱们编写了一个简略的demo 组件 然而还是不能掀起任何波澜 甚至还会有报错 然而咱们稍安勿躁 接下来的一步比拟要害 在packages文件下创立一个index.ts 用来获取咱们编写的组件 并且导出

// 导入单个组件import test from './test'// 以数组的构造保留组件，便于遍历const components = [test];// 定义 install 办法const install:any = function (Vue:any) {  if (install.installed)return;  install.installed = true;  // 遍历并注册全局组件  components.map(component => {    // Vue.component(component.name, component);    Vue.use(component)  });};if (typeof window !== "undefined" && window.Vue) {  install(window.Vue);}export default {  // 导出的对象必须具备一个 install 办法  install,  // 组件列表  ...components};

3.2 实现全局编写组件

功败垂成! 接下来要做的就是在我的项目中先进行测试

第四步 在我的项目中进行测试

4.1 在我的项目中进行测试咱们的组件是否能够失常运行 援用组件

咱们能够去咱们的doc文件夹下获取一下咱们刚编写的test组件是否ok 是否能够失常应用 首先要做的就是在doc/main.ts引入 咱们刚编写的组件

import Vue from "vue";import App from "./App.vue";import test from "../packages/index"; //引入组件Vue.use(test); //进行注册Vue.config.productionTip = false;new Vue({    render: (h) => h(App),}).$mount("#app");

4.2 在我的项目中应用刚刚编写的test组件

因为main中进行了全局注册 所以间接应用组件名即可

<template>    <div id="app">        <div id="nav">            test            <test></test>        </div>    </div></template><style lang="scss">#app {    font-family: Avenir, Helvetica, Arial, sans-serif;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    text-align: center;    color: #2c3e50;}#nav {    padding: 30px;    a {        font-weight: bold;        color: #2c3e50;        &.router-link-exact-active {            color: #42b983;        }    }}</style>

4.3 查看页面

引入实现后咱们看一下页面是否是正确的成果

ok 款式 输入都有存在一个没少 接下来就是打包成npm包公布到npm上 供别人应用

第五步 配置打包

5.1配置打包命令

为了辨别打包 咱们将咱们的packages文件夹打包成lib
在package.json的scripts新增一条lib命令

    "lib": "vue-cli-service build --target lib --name test --dest lib packages/index.ts"    // 该命令 指定了打包哪一个文件夹和名字

5.2 配置读取门路main

打包配置实现后 就须要配置打包读取的门路了 还是在package.json中更改 更改package.json的main批改成咱们打包后的js

 "main": "lib/test.umd.min.js",

5.3 全副配置

5.4 开始打包

配置实现后 咱们间接应用 yarn lib 或 npm run lib就能够打包成npm包了 让咱们来运行一下打包命令

ok 打包胜利 打包胜利后会在目录下多出一个lib文件夹 该文件夹就是咱们的npm包 接下来就是要把他上传到npm上供大家应用了

第六步上传到npm

6.1 装置nrm 治理 npm

接下来就要上传到 npm 了 首先咱们须要 下载一个nrm插件来治理咱们的npm

// 应用命令全局装置 nrmnpm install -g nrm  

6.2 简略的nrm命令

nrm ls // 查看咱们npm列表nrm use // 切换源

6.3 切换到npm源

首先咱们用nrm ls查看一下咱们以后所在的源 星号为以后所在源 以后咱们在taobao源 咱们应用nrm use npm 切换到 npm源

nrm use npm

这时咱们再查看列表就能够看到npm后面带星号了 证实咱们切换胜利了

第七步 登陆npm源 及上传注意事项

7.1 登陆

切换到 npm源后 咱们就能够用npm login命令进行登陆了 登陆胜利后就能够咱们的上传操作 npm publish 然而在咱们登陆后上传前还有一些须要留神的中央

7.2 注意事项

1.须要留神一下 package.json里的"private"属性 如果是公有须要把它设置为false
2.每次上传都须要更改版本号 只有版本号不同 才能够上传胜利
3.须要留神命名不要和其他人抵触 如果想要指定下载地址 须要在包后面加@符
4.能够创立一个.npmignore文件过滤掉不想上传的文件

7.3 npm publish 上传

好了做了这么多终于能够上传了 来让咱们应用一下npm publish 间接上传即可

ok顺利上传 来让咱们去 npm上看一下咱们的包是否存在

第八步 下载应用

8.1 开始下载

ok 折腾了这么久 终于功败垂成 在其余我的项目中下载测试一下 间接npm install lf-map-npm

8.2 引入应用

ok 到了这里基本上曾经功败垂成了 来让咱们在其余我的项目中引入 在其余我的项目的main.js中引入咱们的组件和组件的css和注册

import lfMapNpm from 'lf-map-npm' // 引入组件import 'lf-map-npm/lib/test.css'  // 引入组件cssVue.use(lfMapNpm)                 // 注册应用  

在我的项目中想用的中央间接应用 为了不便这里在App.vue中间接应用了

<template>   <div id="app">       <test></test>   </div></template><script>export default {   name: "App",};</script><style>#app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px;}</style>

8.3 胜利～

终于到了本次最激动人心的局部了 来让咱们怀着缓和的情绪查看一下页面

okok 胜利没得问题打印款式都在

总结

ok 到了这里第一篇就完结了 本文讲述了如何用vue编写一个npm包的形式及上传
其实非常简单 次要用到的命令是
1.nrm ls 查看npm列表
2.nrm use 切换npm源
3.npm login 登陆npm
4.npm publish 上传到npm
还有就是批改文件夹及配置
咱们第一步曾经迈出接下来就要开始 来基于leaflet来集成一个开箱即用的npm包

 转载需表明出处及受权

npm地址

npm地址
https://www.npmjs.com/package/lf-map-npm

https://www.npmjs.com/package/lf-map-npm

github地址

配置局部我放在了lib分支下 如有需要请到lib分支下载
github地址
https://github.com/dzc980812/lf-map/tree/lib

https://github.com/dzc980812/lf-map/tree/lib

心愿对各位小伙伴有所帮忙 欢送各位 来一起探讨 独特成长 指出有余

如需转载请表明出处 或 取得受权