跟着初探了下flintjs,的确会很棒,超级热更新!

flint介绍

  • 据官网所说, Flint 是一个前端的编译器,它连接了编辑器和浏览器,多种特性让开发 Web 应用更加高效、快捷,Flint 是一个智能的前端开发环境。

  • 不过仍然在开发中,估计将在2016引领前端新潮流吧!

  • 官网:https://flintjs.com/ (目前需要输入 love进入)

简单体验

  • 通过npm直接安装

npm i -g flint
  • flint三个主要命令

flint new name //新建项目

flint [run]  // 运行项目

flint build // 构建项目
  • 尝试

flint new hello

cd hello

flint
  • O 浏览器便打开了页面,显示 Hello world!

目录结构

  • 编译前

+ .flint/
  + internal/
  + build/
  + node_modules/
  + static/     #对应项目的静态资源文件目录
  - .gitignore
  - flint.json  #对应 Flint 自身的配置文件
  - index.html  #对应项目的主页面
  - package.json  #对应 node 的标准配置文件
- main.js
  • 编译后

flint build

新增了build目录其中存放了编译之后产生的主页面(添加了相关资源文件的引用), _ 目录里面存放了运行时所需要的 Flint&React&App 源码,以及样式文件。

npm包自动安装

  • 保持flint运行

flint
  • 在main.js中开始位置加入

import jquery from 'jQuery'
  • 保存,看命令行状态

  • 看项目目录,在node_modules 里加入了jquery包

  • Flint 是 ES6 语法,只要你按照规范,在 Flint run 时使用 import 引入你想要的远程包,它就会自动替你把想要引入的包下载到目录里面,这样你无感知的就可以使用了

超级热更新

Flint 另外一个令人兴奋的特性,就是它集成了热更新技术。它能够使得在不刷新浏览器的情况下,更改本地的前端代码(组件),浏览器自动更新预览。 Flint 直接集成了这项技术,而且建立了专门的通道进行错误的实时反馈。

命令行

  • Flint 提供了三个主要的命令, new&run&build。分别是新建项目、运行项目和构建项目,正好是整个开发的一套流程。

  • 对于 new 命令来说,支持 -u 参数,描述是 "start with a scaffold" ,使用这个参数,可以新建一些脚手架,快速形成项目结构。通过源码分析,是直接从 Github 上拉取的。

  • 对于 run 命令来说,背后支持的是 Flint 的专门的一个 runner 项目,这是一个开发的运行时,主要进行了本地服务器的搭建、 Gulp 工作流的编译、包的安装与卸载、一个传送消息的 bridge 。

服务器

关于服务器,其实 Flint 是内部起了一个基于 Express 的服务器,外加 WebSocket 进行消息的通讯。

……

好吧!期待2016


丁一
944 声望80 粉丝

[链接]