发布npm和CDN
# 前言
当我们的UI库开发完成后,我们需要提供给开发者使用,最简单的方式就是 npm
和 cdn
# npm介绍
npm (opens new window) 是JavaScript的包管理工具,当我们需要使用某个功能时,可能第一时间就是上npm上去查找是否有类似功能的包。同样的,当我们开发了一个功能,我们想分享给其他人使用,也可以上传到npm上。发包到npm上没有严格的限制,只要满足npm包的发布规则就就行了。
# 准备npm发布产物
- 你的项目需要有个
git
仓库,MSSUI
选择的是Github
。 - 需要正确配置
package.json
文件,MSSUI
的package.json
完整配置如下:
{
"name": "mssui",
"version": "0.1.14",
"main": "lib/ml-element-ui.common.js",
"files": [
"lib",
"src/packages"
],
"repository": {
"type": "git",
"url": "git@github.com:MssText/mssui.git"
},
"keywords": [
"mssui",
"vue",
"components"
],
"license": "MIT",
"homepage": "https://mssui-ahwzcr277-msstext.vercel.app/",
"unpkg": "lib/index.js",
"style": "lib/theme-chalk/index.css",
"bugs": {
"url": "https://github.com/MssText/mssui/issues"
},
"scripts": {
// ...
},
"dependencies": {
// ...
},
"devDependencies": {
// ...
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
解释下重要配置项的含义:
- name 是你发布的npm的包名。这个是不允许重名的,所以在取名之前,可以去npm (opens new window)搜索下是否已经存在同名的包
- version 包的版本号
- main 入口文件
- files 提交到npm的产物的目录
- repository 项目的git仓库
- keywords npm上搜索时的关键词
- license 遵守的软件协议
- homepage 官网文档
- bugs 提交
issue
的地址name
、main
、version
这三个选项是必备的。且一定要填写正确,不然会影响npm包的正常使用。
# 注册npm账号
- npm (opens new window) 找到
sign up
选项。
- 填写相关信息,并验证邮箱
# 登陆账号
打开命令行工具,输入 npm login
,依次输入账号、密码、邮箱,出现下图表示登陆成功:
# 执行发布命令
项目根目录下打开命令行,执行 npm publish
,一路没有报错就发布成功了。最后你可以去官网上搜索你发布的npm包,看看是否发布成功。
# cdn介绍
cdn (opens new window)(内容分发网络)指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本,因此服务器可以根据哪些服务器与用户距离最近,来满足数据的请求。 CDN 提供快速服务,较少受高流量影响。
CDN 被广泛用于传输 stylesheets 和 JavaScript 等静态资源,像 Bootstrap,Jquery 等。对这些库文件使用 CDN 技术,有以下几点好处:
- 通过 CDN 向用户分发传输相关库的静态资源文件,可以降低我们自身服务器的请求压力。
- 大多数CDN在全球都有服务器,所以CDN上的服务器在地理位置上可能比你自己的服务器更接近你的用户。 地理距离会按比例影响延迟。
- CDN已经配置了恰当的缓存设置。使用 CDN 节省了在你的服务器中对静态资源文件的配置。
用大白话说,我们写的组件库的代码资源可以放置在 CDN 上,用户可以通过 <script src="xxxx"></script>
的方式在浏览器使用。
# unpkg介绍
unpkg (opens new window) 是npm上所有内容的快速全球内容交付网络。使用它可以使用以下网址快速轻松地从任何包中加载任何文件。也就是说,你想发布静态资源到 unpkg 上,其实什么都不用做,只需要将资源发布到npm上就可以了。unpkg 提供这样的链接供外部访问:
unpkg.com/:package@:version/:file
可以看下 mssui
在 unpkg (opens new window) 的资源分布:
这里需要注意的是,我们前面提到使用 CDN 引入 mssui
:
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/mssui@0.1.13/lib/theme-chalk/index.css">
<script src="https://unpkg.com/mssui@0.1.13/lib/index.js"></script>
2
3
4
引入的时候,要想正常使用 mssui
, 使用这种方式时,我们需要自动注册所有的组件,也就是在src/packages/index.js
文件中,需要加入这样的代码:
import components from "@/components";
import MlMessage from "@/packages/message/index";
import locale from "@/locale";
const MElement = {
install: function (Vue, opts = {}) {
components.forEach((component) => {
Vue.component(component.name, component);
});
// ...
},
// 每个组件单独导出
...components,
};
// 支持CDN引入
if (typeof window !== "undefined" && window.Vue) {
MElement.install(window.Vue);
}
export default MElement;
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
如上,加入高亮的部分,这样使用 CDN 引入时才能正常使用 MSSUI
。