关于前端:2021-Qcon-前端专场精彩回顾

前言

前两天去加入 Qcon (寰球软件开发大会) , 理解了很多前沿的技术和优良计划，也意识了很多优良的敌人，同时也感激 InfoQ 平台。后续会继续输入更多高质量的内容。

以下次要是针对我看的 前端专场 做个 复盘。

下一代构建工具 Vite 实际与摸索

讲师：张毅，

华为技术有限公司 / 开源能力核心

Vue 社区 Member

Vite 社区 Collaborator

Vue Shenzhen Meetup 发起人

次要解说了 Vite 原理与关键技术、我的项目实战、插件生态、Vite Module Federation 摸索

什么是 Vite？

Vite 有多快？

Vite 为什么快？

Vite 设计基于 2 个 趋势：

1. ES Modules 广泛支持
2. 高性能语言重写 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 文件必须显示申明 <script lang="jsx"> </script>
  • 文件后缀必须是 .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. 组件物料增长迟缓
2. 共性需要难以及时满足

前端智能代码提效方向

1. D2C (设计稿转代码)

2. 智能服务（布局还原、语义化、组件辨认 ……）

3. 可视化工作台（提供物料库，二次编辑，并提供相应逻辑开发） toC / toB

智能代码提效解决

设计稿解决

• 画板设计
• 图层解决
• 数据导出

算法解决

• 智能辨认（图片 文字 外链，组件，区块 …..）
• 智能布局（流式布局、定位布局 ….）
• 智能语义
• 智能逻辑 (依据设计稿智能辨认以后页面逻辑) 难点

可视化工作台解决

• 布局还原解决

  • 编辑器
  • 节点树
  • 还原比照
  • 视图预览模式
  • …….

• 组件映射库

  • 组件辨认
  • 一键替换
  • 组件入参
  • ……

• 逻辑开发

  • 组件化
  • 生命周期
  • 属性设置
  • 事件绑定
  • 字段绑定
  • 埋点上报
  • ……..

代码生成

• JSON 数据

• AST 解决

• DSL 反对

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

谈谈本人对 可视化 方向的认识

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

• toC 次要是针对集体客户，次要利用于一些 H5 流动页 展现页 问卷调查 ….. (需要不会太简单，只是物料库须要一直的更新)
• toB 次要是针对企业客户和外部员工应用，次要利用于 一些 外部组件生成 报表生成 组件生成 ……（需要简单，物料库更新没有那么频繁）

当初 智能化 在融入“低代码”开发中，大大会省去开发用时，也会迎接更多的挑战，可视化路还很长。

关注公众号: 前端自学社区 , 退出自学交换群，一起成长学习！