乐趣区

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

jiezi

介绍

应用过 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

// 应用命令全局装置 nrm
npm 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'  // 引入组件 css
Vue.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
心愿对各位小伙伴有所帮忙 欢送各位 来一起探讨 独特成长 指出有余 
 如需转载请表明出处 或 取得受权
退出移动版