首页
关于
翻译
留言
搜索
1
第 4 章 创建您的第一个React组件
493 阅读
2
如何读懂编译后的JS代码
431 阅读
3
使用Jest测试React应用
410 阅读
4
让您的React组件具有响应式
347 阅读
5
第 2 章 为您的项目安装强大的工具
336 阅读
JavaScript
TypeScript
移动
Web
后端
测试
运维
登录
Search
标签搜索
React
Angular
库
组件
工程化
Vue
框架
Node.js
Hook
可视化
性能
兼容
Debug
HTML5
ActionScript
CSS
部署
分享
算法
PHP
Flying
累计撰写
174
篇文章
累计收到
2
条评论
首页
栏目
JavaScript
TypeScript
移动
Web
后端
测试
运维
页面
关于
翻译
留言
搜索到
12
篇
标签为 兼容 的文章
2021-08-05
AntV G6项目如何兼容IE
阿里的AntV G6是很强大很好用,但要兼容IE会遇到各种坑。虽然官网给出了解决方案,但因为原因千奇百怪,即使完全照官方的方案操作一遍,仍然有问题。本文如果能帮到同学少踩坑,那就不枉我花二个小时来总结了。本文仅以Vue cli工程为例讲解。vue-g6-editor曾经用官方推荐的基于G6和Vue的可视化编辑器做了一个场景编辑器,测试不能兼容IE,报如下错误:点击错误行进去排查,发现 @antv/g/src/core/event-emitter.js中有个方法里面有const关键字,如下图:Vue cli3以上版本使用core-js基本上解决了大部分的IE兼容问题,但不少第三方库(node_modules中)将es6语句转换成es5时做得不彻底,无形中会引入新的IE兼容问题。一般的webpack cli工程为了编译得快,默认情况下babel-loader会忽略所有node_modules中的文件。如果想要通过Babel显式转译一个依赖,可以在transpileDependencies选项中列出来,然后在使用工程中再转换。明白了这个道理就比较好解决问题了。transpileDependencies: ["@antv/g", "@antv/g6"]注意:3.2.10以下版本的@antv/g跑这个示例都必须设置"@antv/g"依赖项。3.2.10~3.8.5版本的可以不用额外加依赖项,但要相应修改示例代码中的一些依赖包路径才能跑起来X-Flowchart-Vue该项目的示例有些Viso的味道,画流程图爽歪歪,文档很Nice,不足的是包太大了。测试了一下该示例不能兼容IE。因为该工程根本没有设置transpileDependencies,如下设置就可以了:transpileDependencies: ["@oxoyo/xfc"]注意:示例工程依赖,@oxoyo/xfc,后者依赖@antv/g6,通常在transpileDependencies添加的是直接依赖。普通工程普通的Vue cli + @antv/g6工程有没有兼容IE问题呢?经我测试,@antv/g6 4.0.4以上版本不能兼容IE,会报如下错误:My God,新版竟然用了Proxy。一步步排查发现在@antv/layout/es/layout/layout.js// FIXME // FOR G6 export const Layouts = new Proxy({}, { get: (target, propKey) => { return getLayoutByName(propKey); }, set: (target, propKey, value) => { registerLayout(propKey, value); return true; } });阿里的前端同学也不容易,对不对? ::(呵呵) 。没办法,既然用了Proxy,就等于放弃IE了。所以如果一定要支持IE, @antv/g6的版本最好是3.1.0~4.0.4。由于3.1.0以下版本改动太大,不推荐使用。总结结合工作实践,总结一下解决兼容IE的办法:低版本cli工程,检查有没有配置babel-plugin-transform-runtime/babel-polyfill;高版本cli工程,检查有没有配置core-js;高版本cli工程,想一想要不要配置transpileDependencies,本文中的 @antv/g6,还有经常用到的vue-echarts、vue-baidu-map,都需要设置相应的transpileDependencies;最后考虑要不要降级依赖的第三方库。高版本的 @antv/g6和swiper都不能兼容IE,降级后可以兼容。有同学可能会说,微软都放弃IE转向Edge了吗?花那么多精力搞IE兼容干什么呢?说实话,我也盼望IE早点退出历史舞台。但事实上,客户说一定要支持IE,老板产品说一定要支持IE,有什么办法呢?
2021年08月05日
99 阅读
0 评论
2 点赞
2018-05-25
Webpack v4分包优化
从Webpack v4开始,移除了CommonsChunkPlugin,取而代之的是SplitChunks。最初,chunks(以及内部导入的模块)是通过内部Webpack图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化。
2018年05月25日
167 阅读
0 评论
6 点赞
2018-01-26
使用transform-runtime
上一次我们给大家介绍了怎样使用babel-polyfill。只要引入这个插件就能就很好地兼容IE浏览器了,但是这会导致最终的打包文件偏大,即使打开了useBuiltIns,效果也不明显。作为前端架构师,要对代码质量及性能比较高的要求。前期开发赶进度也就罢了,上生产前一定要花时间优化。本文我们就来介绍transform-runtime。
2018年01月26日
54 阅读
0 评论
4 点赞
2017-07-28
使用babel-polyfill
今天写代码真是行云流水,很快就搞完了,马上提交。下午测试告诉我,不能兼容IE浏览器。这不打开就是空白,F12进去跳出一个醒目的错误:[vuex] vuex requires a Promise polyfill in this browser.这不是Vue的锅,React应用也会遇到兼容IE浏览器的问题。百度了一下,很快找到解决方案。只要在入口文件添加引入babel-polyfill就搞定了。出于好奇,我下午抽时间仔细研究了一下babel。
2017年07月28日
59 阅读
0 评论
4 点赞
2017-05-28
Express session的基本用法
Session是另一种记录客户状态的机制,不同的是Cookie 保存在客户端浏览器中,而Session 保存在服务器上。当浏览器访问服务器并发送第一次请求时,服务器端会创建一个Session对象,生成一个类似于key/value 的键值对, 然后将key(cookie)返回到浏览器(客户)端,浏览器下次再访问时,携带key(Cookie),找到对应的session(Value)。
2017年05月28日
121 阅读
0 评论
3 点赞
1
2
3