2021 Qcon 前端专场精彩回顾前端vue.js可视化vite

前言前两天去参加 Qcon (全球软件开发大会) , 了解了很多前沿的技术和优秀方案，也认识了很多优秀的朋友，同时也感谢InfoQ平台。后续会持续输出更多高质量的内容。
以下主要是针对我看的 前端专场 做个复盘。
下一代构建工具 Vite 实践与探索
文章图片

讲师：张毅，
【2021 Qcon 前端专场精彩回顾】华为技术有限公司 / 开源能力中心
Vue 社区 Member
Vite 社区 Collaborator
Vue Shenzhen Meetup 发起人
主要讲解了 Vite 原理与关键技术、项目实战、插件生态、Vite Module Federation 探索
什么是 Vite ？

文章图片

文章图片

文章图片

Vite 有多快？

文章图片

Vite 为什么快？
Vite 设计基于 2 个趋势：

ES Modules 广泛支持
高性能语言重写 Compiler

Vite 核心原理

文章图片

No-Bundle 带来的优缺点
优点：

快
ESM 标准兼容

缺点：

请求熟练增多
Dev 和生产不一致
部分依赖不提供ESM

Webpack 迁移 Vite 实践

文章图片

Vite 使用常见问题
CommonJS 的挑战

dev 环境：
- src 源码，手工修改为 ESM
- node_modules：optimizeDeps.include
- 使用插件 @originjs/vite-plugin-commonjs
生产构建：
- Vite 默认使用 @rollup/plugin-commonjs
- 配置 build.commonjsOptions，例如：transformMixedEsModules

浏览器兼容

dev 开发环境依赖 ESM，但 build 打包仍可兼容 IE11
@vitejs/plugin-legacy

其它

jsx 支持
- .vue 文件必须显示声明
- 文件后缀必须是 .jsx
Typescript 兼容
- esbuild 只做转译，不执行类型检查
- 每个文件独立编译 isolatedModules
Node built-ins
- Vite will not support (same as webpack5)

Vite 插件生态以及插件推荐

https://github.com/vitejs/awe...
https://vite-rollup-plugins.p...
@vitejs/plugin-vue / @vite-plugin-vue2
@vitejs/plugin-legacy
@vitejs/plugin-vue-jsx
@vitejs/plugin-react

什么时候该上 Vite ？
这个问题也是当时一位在场的观众向讲师提的问题，我也特别好奇。
讲师说：在新的项目 / 和一些小的项目上可以使用Vite 构建，小的项目可以通过Webpack 迁移到 Vite, 对于老项目和比较大的项目不建议现在迁移到 Vite ,会有很多坑要踩。
从多端适配到智能代码——看前端创新演进之路

文章图片

讲师：韦沿海
京东零售前端技术专家
主要讲解了前端研发提效历程，前端智能化新方向，前端智能实践。
以下内容是不对外开放的，做了脱敏处理。
前端提效历程
工程化 ——> 多端适配 ——> 可视化搭建
工程化自动化

以 Grunt、Gulp 为代表工具

模块化

以Webpack 为代表工具

多端适配跨应用端

主要指 HTML5 ReactNative 小程序

跨框架

主要指Vue React

前端提效- 可视化搭建
可视化搭建提效弊端

组件物料增长缓慢
个性需求难以及时满足

前端智能代码提效方向
1. D2C (设计稿转代码) 2. 智能服务（布局还原、语义化、组件识别......） 3. 可视化工作台（提供物料库，二次编辑，并提供相应逻辑开发） toC / toB 智能代码提效处理
设计稿处理

画板设计
图层处理
数据导出

算法处理

智能识别（图片文字外链，组件，区块.....）
智能布局（流式布局、定位布局....）
智能语义
智能逻辑 (根据设计稿智能识别当前页面逻辑) 难点

可视化工作台处理

布局还原处理
- 编辑器
- 节点树
- 还原对比
- 视图预览模式
- .......
组件映射库
- 组件识别
- 一键替换
- 组件入参
- ......
逻辑开发
- 组件化
- 生命周期
- 属性设置
- 事件绑定
- 字段绑定
- 埋点上报
- ........

代码生成

JSON 数据
AST 处理
DSL 支持

传统开发流程与智能开发流程的区别

文章图片

文章图片

谈谈自己对可视化方向的看法
我是做中后台服务方向的，对于可视化方向也挺感兴趣，也体验过市场很多的低代码平台，也很多朋友交流过 “低代码”。其实早在前几年就有这个了，只不过不叫 "低代码"，以前叫 " 0 代码"，简而意之，就是编写少量代码，出结果，来达到团队提效，尽早交付产品。就目前来看，可视化分为 toC 和 toB.