1.��ԴcdnԴ��
2.开源终端工具可查询 IP 信息 ...
3.如何使用webpack进行cdn配置呢?
4.七牛云 ╳ 掘金推出开源库前端加速 CDN 服务 Staticfile.org
��ԴcdnԴ��
mavon-editor是开源开源一款开源的优秀的页面富文本编辑器,在很多vue项目中都有使用。开源开源本文也是开源开源记录一次在使用mavon-editor的过程中,针对资源加载的开源开源问题再三思索(因为是内网项目)而得出的最终的解决方案,同时也是开源开源为有同样困扰的小伙伴提供更多的选择。
首先,开源开源小程序源码上线这个问题出现在v2.4.2及以后的开源开源版本中,因为要优化插件的开源开源打包体积大小,因此,开源开源插件中默认不包含以下的开源开源几个依赖文件:
highlight.js(代码高亮)
github-markdown-css(流行的markdown样式)
katex(V2.4.7)(markdown语法拓展)
当我们的项目中使用mavon-editor的时候,这三个资源默认是开源开源从CDN引进来的,这就导致很多内网项目中,开源开源产生了诡异的开源开源问题,比如代码不能高亮了,开源开源选择好的开源开源样式不能生效了等等。
针对此问题,官方也给出了相应的解决方案,点击查看
基本就是手动添加一些externalLink,感兴趣的伙伴自己看一下就好,我就不多赘述了。
经过我的测试呢,发现了几个问题
第一个问题是:官方提供的解决办法不能引入highlightjs/styles/github.min.css,所以导致markdown中的代码片段不能添加高亮的样式。
代码不高亮,gis插件源码看起来很难受,因此,我们可以直接使用css的@importurl()方法来引入缺失的css文件。
第二个问题是:官方说我们需要安装copy-webpack-plugin这个插件并且在webpack的配置文件中添加一些配置,如下:
module.exports={ plugins:[newCopyWebpackPlugin([{ from:'node_modules/mavon-editor/dist/highlightjs',to:path.resolve(__dirname,'../dist/highlightjs'),//插件将会把文件导出于/dist/highlightjs之下},{ from:'node_modules/mavon-editor/dist/markdown',to:path.resolve(__dirname,'../dist/markdown'),//插件将会把文件导出于/dist/markdown之下},{ from:'node_modules/mavon-editor/dist/katex',//插件将会把文件导出to:path.resolve(__dirname,'../dist/katex')}]),],}目的是把三个依赖文件抽离出来,放到vue项目打包后生成的dist目录下。
这就很麻烦了,因为大部分项目是vue-cli生成的,添加webpack配置我觉得很繁琐,另外每次打包要重新抽离依赖文件也让我难以接受。
有没有什么办法可以抄个近路呢?当然有了~
因为vue-cli中打包的时候,/public下的内容会直接放到打包后的/dist目录下,因此,我们直接从浏览器的source下把代码复制到项目的/public就可以,然后使用的时候直接使用绝对地址,这不就一劳永逸了吗
我们来验证一下这个思路的可行性。
其中我的public下的目录结构是这样的:
public├──index.html├──cdn-lib├──highlight├──highlight.min.js├──styles├──github.min.css├──markdownCss├──github.markdown.css├──github.markdown.min.css├──KaTex├──katex.min.js├──katex.min.css然后我们在控制台运行npmrunbuild执行完以后就发现dist下面会生成同样的目录因为在部署的时候,dist是前端项目的根目录,即,index.html所在的目录那么我们在代码里可以直接使用以\开头的绝对路径
代码如下:
<template><mavon-editor:value="value":subfield="false":defaultOpen="'preview'":ishljs="true":externalLink="externalLink"/></template>exportdefault{ data(){ return{ value:'一段markdown文本',externalLink={ markdown_css:function(){ //这是markdowncss文件路径return'/cdn-lib/markdownCss/github-markdown.min.css'},hljs_js:function(){ //这是hljs文件路径return'/cdn-lib/highlight/highlight.min.js'},katex_css:function(){ //这是katex配色方案路径路径return'/cdn-lib/KaTex/katex.min.css'},katex_js:function(){ //这是katex.js路径return'/cdn-lib/KaTex/katex.min.js'}}}}}<style>//这里引入缺失的css@importurl(/cdn-lib/highlight/styles/github.min.css);</style>当然了,这是个不是办法的办法,就好在是个体力活,动手就行了,otc交易源码不用动脑子。写完以后测试一下,嗯~关机下班,一天的工资到手了~
作者:晴天同学
开源终端工具可查询 IP 信息 ...
在 Linux 的网络调试工具大家族中,dig、nslookup和traceroute是不可或缺的一员。今天,我们将焦点转向一款名为 nali 的开源终端工具,它不仅能查询 IP 地理信息,还能揭示 CDN 服务提供商的幕后秘密。
nali,意为“哪里”,最初以 C 语言开发,但受限于功能和平台支持。后来,开发者选择 GoLang 重写,增加了对 IPv6 的兼容性和Geoip2 数据库,使其功能更加全面。
安装 nali 可分为源码编译和预编译包方式。对于源码安装,你需要 Go 1. 及以上版本。而预编译包则可直接从项目 Release 页面下载对应系统和硬件的版本,解压后运行即可,源码如何下载如在 CentOS 中,就是下载并安装相应的安装包。
使用 nali 时,你可以轻松查询单个或多个 IP 的地理位置,通过管道符进行连贯查询。配合 dig 和 nslookup,nali能帮助你识别 CDN 服务提供商,只需注意 CNAME 域名的解析。此外,nali 还支持定期更新数据库,以及自定义 IP 数据库,只需设置 NALI_DB_IP4 或 NALI_DB_IP6 环境变量。
值得注意的是,Windows 和 Linux 用户都可以使用 nali,但在 Windows 上可能需要手动下载和配置第三方 IP 数据库。通过这些实用技巧,nali 成为了一种强大的网络查询工具,无论你是 Linux 专家还是新手,都能在终端中高效地获取所需的信息。
如何使用webpack进行cdn配置呢?
webpack使用HtmlWebpackPlugin进行cdn配置。在上一篇文章中,我们介绍了cdn的实现原理。现在,k客源码让我们来认识一下如何在形式化开发中使用cdn功能。要使用cdn功能,我们需要cdn服务提供商。我们可以自己搭建,也可以使用一些知名的服务商。幸运的是,市场上有许多免费的cdn服务提供商,例如:其中,BootCDN是Bootstrap中文网支持和维护的前端开源项目免费CDN服务,项目资源与cdnjs仓库同步。界面比较美观,支持搜索功能,可以在线测试cdn是否正常,下面以Bootcdn为例。
在以前的项目开发中,我们经常使用webpack来构建项目,它有两个主要功能,即
webpack中cdn的使用是在静态资源打包生成的时候完成的。主要原理是使用html-webpack-plugin动态插入cdn链接。
这里就不介绍webpack的使用了,以vue-cli2.x生成的默认项目为例。
Html-webpack-plugin是webpack的一个插件,可以动态创建和编辑Html内容。在html中使用esj语法可以读取配置中的参数,简化了html文件的构造。
这次我们主要用它来动态插入cdn链接,比如链接标签,脚本标签。
在线项目地址
vue-cli2.x
使用webpack类型创建一个名为webpack-cdn-demo的vue项目。如果安装的vue-cli是3.x版,命令会有所不同。请参见vue-cli3了解详细信息。
安装依赖性
启动一个项目
下面简单介绍一下目录结构。
build文件夹中的webpack.prod.conf.js是我们的主文件,我们在其中动态设置不需要打包的模块,并构建适当的链接。
在webpack项目中,引入的第三方资源将被统一打包到vender文件中。我们可以通过webpack的externals属性设置包排除这个模块。详情请参见外部扩展。
在前面的步骤中,我们创建了包括vue和vue-router的项目。正式开发中,会有element-ui等ui库。为了演示方便,我们安装了element-ui和axios两个模块,并在构建时实现了这个模块以cdn的形式引入。
安装时注意记住-S,它的作用是安装后在package.json项目文件中插入记录,后续操作需要读取已安装的模块。
对于cdn,我们可以自己搭建,也可以使用专业的cdn服务商。在这里,我们使用免费的cdnbootcdn。选择免费的cdn有很多好处,但毕竟有一个隐患,就是服务可能会崩溃。
依次搜索前面的模块,结果如下
根据规则,cdn资源路径规则如下
其他cdn服务商也一样。
其实使用cdn就是在webpack热启动打包的时候动态插入脚本和样式链接。为了维护方便,我们在build/utils.js文件中增加了几个方法,以后可以在webpack.dev.conf.js和webpack.prod.conf.js上使用。
如果没有build/utils.js,可以添加到其他文件中,只要后续步骤可以操作即可。
命名模块名,与package.json相同
范围模块范围命名
Jsjs地址
Csscss地址
这里要特别注意scope,这是webpack配置的外部参数下的信息。比如vue的作用域名称是Vue,vue-router的作用域名称是VueRouter,element-ui的作用域名称是element。同样,jq的作用域名称是JQuery。具体方法是先引入这个资源,然后在控制台中依次输入近似值,一一匹配(目前还没有找到更好的方法)。
我们可以在webpack热启动时使用cdn进行本地调试。
在build/webpack.dev.conf.js中,已经默认引入了utils.js,可以直接调用相关方法。如果是自定义文件,记得介绍一下。
我们可以给它添加一些自定义属性,方便在index.html调用。,现修改如下:
cdnConfig和onlyCss自定义属性可以通过htmlWebpackPlugin.options以html格式读取..
更多html-webpack-plugin配置。官网,这里暂时不需要更多。
打包的时候我们用的是cdn,配置和之前的dev差不多,但是需要多做一步。
注意这里的externalModules,后面会用到,也就是比dev多几个步骤。
添加与dev相同的两个配置,但只需要将Css改为true,因为我们在打包时要使用比css更多的内容。
webpack配置已经完成,相关参数已经添加到html-webpack-plugin中,可以直接在页面上使用。语法是ejs,类似于ASP.NET、jsp和php。
及格
webpack配置已经修改,项目需要重启才能生效。
打包项目
可见包装体积大大减少。
Cdn资源在页面上也有正确的介绍。
最后,git地址:ame的方式接入,将域名cname到cdn,再回源到服务器,设置需要加速的文件类型,例如jscsspng等等
七牛云 ╳ 掘金推出开源库前端加速 CDN 服务 Staticfile.org
七牛云携手掘金推出全新开源库前端加速CDN服务 Staticfile.org,为开发者提供高质量稳定的CDN服务。该服务同步海外CDNJS源站,同时接受国内开源贡献者提交有价值库。最重要的是,服务支持海外最优加速解析,确保国内、国外用户都能使用全球统一的最优加速域名。
掘金作为技术人才内容社区,与七牛云合作,旨在提供易用、高效且全面的前端开源库CDN加速服务。产品仍在不断迭代优化,期待社区用户的支持与反馈。掘金与七牛云共同努力,致力于提升用户体验,帮助前端开发者。
欢迎开发者试用并提供宝贵意见,积极参与开源项目。可以通过以下****联系七牛云和掘金团队:martketing@qiniu.com 和 hi@xitu.io。此外,可关注并收藏开源库:github.com/staticfile/s...