摘要:現(xiàn)在已經(jīng)在前端比較流行的等框架中得到使用。今天煦涵就和大家一起來(lái)學(xué)習(xí)以及在實(shí)際項(xiàng)目中的使用。安裝這里我們選擇使用,當(dāng)前你也可以使用如果你對(duì)不是很了解,建議你閱讀煦涵說(shuō)。
Flow是Facebook出品的一個(gè)JavaScript代碼的靜態(tài)類(lèi)型檢查工具,它做了很多處理,使您的代碼更快,更智能,更自信,更好的適應(yīng)性。現(xiàn)在已經(jīng)在前端比較流行的React 、Vue 等框架中得到使用。今天煦涵就和大家一起來(lái)學(xué)習(xí)Flow以及在實(shí)際項(xiàng)目中的使用。
Flow 安裝這里我們選擇使用 yarn,當(dāng)前你也可以使用 npm, 如果你對(duì) yarn不是很了解,建議你閱讀 煦涵說(shuō)Yarn。首先我們先初始化一個(gè) flow 項(xiàng)目,安裝完編譯器,然后再安裝 flow 。
mkdir flow-project cd flow-project yarn init yarn add --dev babel-cli babel-preset-flow babel-preset-es2015
項(xiàng)目根目錄下創(chuàng)建 .babelrc 文件,并增加如下內(nèi)容:
{ "presets": ["flow", "es2015"] }
安裝 Flow:
yarn add --dev flow-bin
運(yùn)行 flow:
需要在根目錄下新建一個(gè) .flowconfig 文件,不然會(huì)報(bào)找不到該文件錯(cuò)誤。
yarn run flow
yarn run v0.16.1 $ "/flow-proj/node_modules/.bin/flow" Launching Flow server for /flow-proj Spawned flow server (pid=17242) Logs will go to /private/tmp/flow/zSvue-workspacezSflow-proj.log No errors! ? Done in 2.48s.Flow 使用
我們先在根目錄下新建src目錄,并新建一個(gè)index.js文件。同時(shí)在 package.json 文件中增加下面scripts內(nèi)容,以方便我們后期的命令行編譯。
index.js
// @flow [1,2,3,4].map((item:number, index) => { return item * item; });
package.json
"scripts": { "build": "yarn run flow && babel src -d lib" }
運(yùn)行 yarn run build, 沒(méi)有報(bào)錯(cuò), 會(huì)在生成lib文件目錄,index.js的 flow type 注釋會(huì)被 remove 掉,同時(shí)進(jìn)行了箭頭函數(shù)到ES5的轉(zhuǎn)換。
如果我修改上面index.js的代碼:
// @flow ["1",2,3,4].map((item:number, index) => { return item * item; });
運(yùn)行 yarn run build,會(huì)報(bào)如下類(lèi)型檢測(cè)錯(cuò)誤:
yarn run v0.16.1 $ "/flow-proj/node_modules/.bin/flow" src/index.js:3 3: ["1",2,3,4].map((item:number, index) => { ^^^ string. This type is incompatible with the expected param type of 3: ["1",2,3,4].map((item:number, index) => { ^^^^^^ number Found 1 error error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
更多類(lèi)型堅(jiān)持實(shí)例不再一一列舉,官網(wǎng)有很多介紹type的例子。
Flow 配置文件上面提到?jīng)]有配置文件,會(huì)報(bào)錯(cuò),.flowconfig 文件由以下5個(gè)部分組成:
[include] --包含的文件或者目錄
[ignore] --忽略的文件或者目錄,支持正則匹配
[libs] --第三方庫(kù)支持,項(xiàng)目根目錄下的flow-typed目錄作為庫(kù)目錄
[options] --默認(rèn)鍵值對(duì)配置,某些選項(xiàng)可以使用命令行方式重載
[version] --期望使用的Flow版本
流行編輯器插件支持Visual Studio Code: Flow-Language-Support
Sublime Text:Flow 和 SublimeLinter-flow
更多請(qǐng)參考:https://flow.org/en/docs/edit...
感謝您的閱讀
--eof--
作者[煦涵]
2017年05月20日
下面是「FED實(shí)驗(yàn)室」的微信公眾號(hào)二維碼,歡迎長(zhǎng)按、掃描關(guān)注:
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/83299.html
摘要:,下一代編譯器,當(dāng)前版本,它可以處理的所有新語(yǔ)法,并內(nèi)置了擴(kuò)展及類(lèi)型注解支持,如果對(duì)不是很了解可以查看實(shí)驗(yàn)室微信公眾號(hào)文章煦涵說(shuō)。 Babel,下一代javascript編譯器,當(dāng)前版本 v2.4.0 ,它可以處理ES6的所有新語(yǔ)法,并內(nèi)置了React JSX擴(kuò)展及Flow類(lèi)型注解支持,如果對(duì)Flow不是很了解可以查看FED實(shí)驗(yàn)室微信公眾號(hào)文章煦涵說(shuō)Flow。 Babel與JavaSc...
摘要:對(duì)象表示法,是一種數(shù)據(jù)交換格式,能夠在服務(wù)器端交換數(shù)據(jù),年由提出,目的是取代繁瑣笨重的格式。煦涵煦涵煦涵煦涵煦涵參考文檔感謝您的閱讀作者煦涵年月日下面是實(shí)驗(yàn)室的微信公眾號(hào)二維碼,歡迎長(zhǎng)按掃描關(guān)注 JSON(Javascript Object Notaion, javascript 對(duì)象表示法), 是一種數(shù)據(jù)交換格式,能夠在服務(wù)器端交換數(shù)據(jù), 2001年由Douglas Crockfor...
摘要:是一個(gè)新的包管理器,它由開(kāi)發(fā)者共同開(kāi)發(fā)完成。從包管理器中借鑒,創(chuàng)建了文件,用來(lái)記錄項(xiàng)目使用每個(gè)包的確切版本。感謝您的閱讀作者煦涵年月日下面是實(shí)驗(yàn)室的微信公眾號(hào)二維碼,歡迎長(zhǎng)按掃描關(guān)注 Yarn是一個(gè)新的Javascript包管理器,它由Facebook, Google, Exponent and Tilde開(kāi)發(fā)者共同開(kāi)發(fā)完成。Yarn 不是 NPM 的fork版本,而是它的重新設(shè)計(jì),Y...
摘要:,是一個(gè)前端資源加載打包工具,現(xiàn)在版本已經(jīng)到,今天的文章不支持介紹的及使用,而是對(duì)最近項(xiàng)目開(kāi)發(fā)中使用打包時(shí)處理低版本及以下瀏覽器兼容問(wèn)題做一次總結(jié)。 Webpack,Webpack 是一個(gè)前端資源加載/打包工具,現(xiàn)在版本已經(jīng) release 到 v2.6.1,今天的文章不支持介紹Webpack的API及使用,而是對(duì)最近項(xiàng)目開(kāi)發(fā)中使用Webpack打包時(shí)處理IE低版本(IE8及以下)瀏覽...
摘要:資源官網(wǎng)安裝參考什么是是一個(gè)弱類(lèi)型的解釋性語(yǔ)言,無(wú)法在編譯環(huán)節(jié)進(jìn)行靜態(tài)類(lèi)型校驗(yàn),如果想也具備靜態(tài)類(lèi)型檢查功能。那就得使用到由推出,官網(wǎng)是。 資源 官網(wǎng):https://flow.org/ 安裝:https://flow.org/en/docs/inst... 參考:https://www.01hai.com/note/av... https://www.jianshu.com/p...
閱讀 1141·2021-11-23 10:04
閱讀 2401·2021-11-22 15:29
閱讀 2743·2021-11-19 09:40
閱讀 715·2021-09-22 15:26
閱讀 2117·2019-08-29 16:27
閱讀 2484·2019-08-29 16:10
閱讀 1918·2019-08-29 15:43
閱讀 3275·2019-08-29 12:43