前端在以后我的项目写demo的痛点
- 【污染源代码】demo间接写在源我的项目中，容易污染源我的项目代码，前期还要删除比拟麻烦
- 【打包太慢】只想测试一个小性能，每次批改要等整个我的项目编译打包，甚至还要通过页面操作能力定位到指定性能，效率太低
- 【demo记录】遇到不分明的api性能，demo应该是循序渐进的，像材料文档一样，不便更全面的测试，这一点十分重要，大家能够看下github上大佬的demos
疾速编写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、须要编译型
长处和毛病正好和下面是反过来的