flint简单初体验

Batkid 发布于2019-08-19 17:13 / 2127人阅读

摘要：它能够使得在不刷新浏览器的情况下，更改本地的前端代码组件，浏览器自动更新预览。直接集成了这项技术，而且建立了专门的通道进行错误的实时反馈。命令行提供了三个主要的命令，。服务器关于服务器，其实是内部起了一个基于的服务器，外加进行消息的通讯。

跟着初探了下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

混合云 idc机房托管初体验 flint 初长成小白初

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78314.html

阿里egg.js初体验(二)

摘要：接前一篇，阿里初体验一我们继续我们的之旅。注意到，目录里和两个文件夹，这里也是我们编写业务逻辑的主要地方。用于解析用户的输入，处理后返回相应的结果。在使用导出的模块时，需要把导出的模块名改为驼峰标准，且首字母变为小写。接前一篇，阿里egg.js初体验(一) 我们继续我们的egg之旅。我们已经完成了对于项目结构的搭建，现在我们需要开始业务的编写。注意到，目录里controller和se...

liaosilzu2007 2019-08-26 11:32 评论0 收藏0
VIM宏初体验

摘要：，法师拉餐桌吐槽宏等。计算机科学里的宏，是一种批量批处理的称谓。这里的的意识就是执行指定寄存器里的内容，也就是我们做好的宏。宏初体验就到这里年月日补充用录制的，非常方便的录屏工具。第一次知道宏这东西是在word里面，经常莫名其妙弹出一个框说宏xxxxx，完全不明所以。那时候只知道有宏那么个东西，至于他是干嘛的，压根不知晓。第一次用宏还是在玩WOW的时候，那时候流行在动作上加上一些个...

explorer_ddf 2019-06-28 10:17 评论0 收藏0
安装ElasticSearch初体验

摘要：今日项目需要一个小型的搜索的功能的支持，有很多开源的搜索引擎啦，当然个人认为上手容易，安装也比较方便。下安装下业非常好安装了主自己试了下亚马逊上的机器，很快的后面分享一篇在的教程吧。 showImg(https://segmentfault.com/img/bVys3D); 今日项目需要一个小型的搜索的功能的支持，有很多开源的搜索引擎啦，当然Elasticsearch个人认为上手容易，...

Profeel 2019-06-27 13:58 评论0 收藏0