脚本宝典收集整理的这篇文章主要介绍了flint简单初体验,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
跟着初探了下flintjs,的确会很棒,超级热更新!
-
学习地址:
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
以上是脚本宝典为你收集整理的flint简单初体验全部内容,希望文章能够帮你解决flint简单初体验所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。