头图

前端如何快速编写demo

tuihou123321

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

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

image.png

快速编写demo的几种方式

一、写在哪里

1.1、 新建独立项目

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

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

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强大(提示查看)

二、通过什么方式写

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模板推荐:

参考资料

阅读 110

大前端
相关设计内容: js,vue,react,node
394 声望
3 粉丝
0 条评论
你知道吗?

394 声望
3 粉丝
宣传栏