前端如何快速编写demo

前端在当前项目写demo的痛点

• 【污染源代码】demo直接写在源项目中，容易污染源项目代码，后期还要删除比较麻烦
• 【打包太慢】只想测试一个小功能，每次修改要等整个项目编译打包，甚至还要通过页面操作才能定位到指定功能，效率太低
• 【demo记录】遇到不清楚的api功能，demo应该是循序渐进的，像资料文档一样，方便更全面的测试，这一点非常重要，大家可以看下github上大佬的demos

快速编写demo的几种方式

一、写在哪里

1.1、在当前项目，设置测试文件夹，并添加.git忽略 （推荐）

使用方法：

• 在localDemo内添加测试demo文件
• 把demo import 到对应的位置，通过路由可直接访问，或者在route.js中的/demo page中添加（直接放在顶层可减少打包内容）
• 查看相应的路由

优点：

• 测试方便，不用新建项目，可共享项目中所有的依赖和数据

缺点：

• demo分散在各个项目中，不方便日后归档，查找 // 这个问题不大，好的demo可以再单独领出来，单独存储

.gitignore

**/localDemo

1.2、scratches and consoles

webstorm临时文件编辑环境,不用单独开项目，可以利用快捷键快速创建任意的文件

适用场景：临时记录，快速编写各种简单的demo

快速创建

• 新建scratches file // ctrl+shift+alt+a

  • 【类型丰富】可自定义所有类型
  • 【功能丰富】完整的运行和debug功能

• 新建scratches buffer //ctrl+shift+a, 再输入buffer搜索

  • 【数量限制】只支持五个文件，后面的会重新覆盖，适合临时记录
  • 【类型限制】默认text后缀

1.3、在线IDE

比如： codesandbox， codepen

适用场景：库的演示demo，教学

优点：

• 便捷，可在线编译
• 方便分享给他人调试

缺点：

• 卡顿
• 不能跳转到npm包的内部
• 编辑功能没有IDE强大（提示查看）

1.4、 新建独立项目

新建一个纯净的demoProject项目，最少依赖，可通过多个独立项目，分支来管理

适用场景：系列教程项目，比如typescript-demo, react-demo, webpack-demo等

二、通过什么方式写

2.1、无需编译型-html文件

优点

• 【无需编译】各种库可通过cdn的方式引入（react,vue,umi,antd,lodash, less, sass...）
• 【命名自由】文件名可使用中文介绍详细

缺点：

• 【CDN源查找】对应依赖的cdn版本，得花时间
• 【写法区别】html文件的引入方式，和import的引入不一样，后期得微调一下代码
• 【缺少提示】比如依赖库中的语法提示，引入方法的跳转

可以结合webstorm的live templatet 和 scratches 功能，快速创建demo；
常用的demo模板文件： html-react-antd.html, html-react.html...

模板内容可查看：https://github.com/tuihou1233...
常用库cdn源查找网站(国内站点速度快)： https://www.bootcdn.cn/

2.2、需要编译型

优点和缺点正好和上面是反过来的

加快编译的几个优化点

• webpack打包优化

  • 提取共用代码，打包成verdor.js，以后这部分就不用编译，每次只编译需要编译的文件
  • 使用cdn代替代替部分Npm包
  • 按需加载，比如：antd组件
  • ...

• 使用其他打包工具

  • vite

cli模板推荐：

• react+typescript+antd

参考资料

• vite官网介绍