共计 1080 个字符，预计需要花费 3 分钟才能阅读完成。
前端在以后我的项目写 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、须要编译型
长处和毛病正好和下面是反过来的
正文完