flint简单初体验

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

• 学习地址：

  • http://frontenddev.org/link/ali-11-11-2015-flint.html

  • https://github.com/amfe/article/issues/25
    手淘前端内部目前比较流行的工作流，是 MVVM 框架 + 各种第三方库 + NPM 包管理 + Gulp 流 + Webpack 打包 + 本地服务器 + Hot Loader 插件或者是 LiveReload 插件，再配合上喜欢的编辑器、浏览器

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