Getting Started with FIS3

Getting started with FIS3 by Jason Liao

Transcript

1. Getting Started With FIS3
2. FIS3 解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码 部署、开发流程等问题
3. Webpack ­ module bundler
4. Webpack 开发中的痛点 loaders 依赖过多 配置过于复杂 对开发者不友好 对 MPA 并不友好
5. loader 依赖过多 n p m i ­ ­ s a v e ­ d e v b a b e l ­ c o r e b a b e l ­ l o a d e r b a b e l ­ p r e s e t ­ e s 2 0 1 5
6. loader 依赖过多 n p m i # y o u s u r e ?
7. 配置过于复杂 webpack­dev­server/webpack­hot­middle NODE_ENV ...
8. 对开发者不友好 哇，可以了 :D 为什么，加了啥 0.0 不知道 :)
9. 对 MPA 不友好 Webpack 最理想是用在 SPA 上，一个入口，一个 b u n d l e . j s 打包所 有资源。 太大？各种 optimization plgins 来一下
10. 我也是 Webpack 党呀！
11. Getting Started With FIS3 DEMO
12. < s c r i p t s r c = " . . / s t a t i c / m o d . j s " > < / s c r i p t > m o d . j s 是 CommonJS 的模块化框架，你可以使用 AMD 的 r e q u i r e . j s ，或者 CMD 的 s e a . j s 等等
13. 不是从入口的 . j s 出发，而是不同的 . h t m l 按需加载不同的 . j s ，对 SPA 和 MPA 都友好
14. / / p a c k a g e . j s o n " d e v D e p e n d e n c i e s " : { " f i s ­ p a r s e r ­ b a b e l ­ 5 . x " : " ^ 1 . 4 . 0 " , " f i s 3 ­ h o o k ­ c o m m o n j s " : " ^ 0 . 1 . 2 5 " , " f i s 3 ­ h o o k ­ n o d e _ m o d u l e s " : " ^ 2 . 2 . 7 " , " f i s 3 ­ p a r s e r ­ n o d e ­ s a s s " : " ^ 0 . 1 . 9 " , " f i s 3 ­ p o s t p a c k a g e r ­ l o a d e r " : " ^ 2 . 0 . 5 " , " f i s 3 ­ p r e p r o c e s s o r ­ j s ­ r e q u i r e ­ c s s " : " ^ 0 . 1 . 0 " }
15. FIS3 提供的是内置的常驻 server，只要换换 release 命令 f i s 3 r e l e a s e ­ w L 换个样式看看咧～
16. FIS3 的配置像 CSS 样式一样，底下的可以覆盖上面的，可以使用 . m e d i a 来根据不同的开发环境做处理，release 时加上 media 名字 就可以了，像 f i s 3 r e l e a s e p r o d
18. FIS3 的优点 配置清晰简单，依赖少 文件可以单独处理，资源自动同步 每个页面独立加载脚步，对 SPA 和 MPA 都友好 内置 server,一条命令解决文件监听和浏览器刷新 编译构建过程清晰，可对应配置，对开发者友好
19. 当然还有一些 FIS3 的特性我没有了解到，例如 内容嵌入、定位资源、 依赖声明、自定义插件、 r o a d m a p . p a t h 等等，这些对部署和性能优化 也有很大的帮助，详情看 Wiki
20. 我也是 Webpack 党呀！
21. FIS3 的缺点 入门门槛高，Demo 基于功能，而非项目本身 使用的人不多，坑都没有被沉挖(不同的插件之间会有影响) 社区不活跃，解决问题不通畅 给想玩 FIS3 的建议 ­ 一切尽在 issues 中
22. Thanks by JasonLiao(jiebinliao)