flint簡單初體驗

Batkid 發布于2019-08-19 17:13 / 2280人閱讀

摘要：它能夠使得在不刷新瀏覽器的情況下，更改本地的前端代碼組件，瀏覽器自動更新預覽。直接集成了這項技術，而且建立了專門的通道進行錯誤的實時反饋。命令行提供了三個主要的命令，。服務器關于服務器，其實是內部起了一個基于的服務器，外加進行消息的通訊。

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

云服務器 GPU云服務器初體驗 flint 初長成小白初

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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