flow从零开始----装置和设置

2023年1月23日 243次阅读 来源: advance100

资本

什么是Flow

JavaScript是一个弱范例的解释性言语，没法在编译环节举行静态范例校验，假如想JS也具有静态范例搜检功用。那就得运用到Flow,Flow由Facebook推出，官网是 https://flow.org/。Flow与微软的TypeScript有些相似，但TypeScript实在像是另一门新言语，而Flow能够明白为一个东西，象vue2、react等都是基于Flow开辟，所以很有必要相识一下Flow。

装置Flow

装置要领：有npm和yarn两种，yarn为facebook出品，如今好象更盛行一些
装置体式格局：全局装置 yarn global add flow-bin
装置历程：

$ yarn global add flow-bin
yarn global v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "flow-bin@0.89.0" with binaries:
      - flow
Done in 6.32s.

装置位置：

$ yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin
# 注重：npm全局装置位置是C:\Users\Administrator\AppData\Roaming\npm
# 注重：请将...Yarn\bin目次增加到体系全局变量path中

cli敕令申明：

$ flow --help  # 检察协助信息
# flow 敕令，实际上是挪用的是C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\flow-bin\flow-win64-v0.89.0\flow.exe，差别操纵体系挪用的是差别的实行文件

设置

事情目次：切换到项目根目次，我的是F:\youshengyouse\learn-flow
设置flow: 敕令是$ flow init，它会在当前目次下天生一个.flowconfig文件，内容以下

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

Flow解释JS文件

凡加Flow解释的文件，以下称flow文件，flow文件就是将// @flow或 /* @flow */加到js文件的最顶部。只要flow文件，flow历程才会在背景看管这些文件，当有范例搜检时，有毛病它就会报错
预备第1个js文件: 内容以下

// @flow
function square(n:number): number {
    return n * n;
}

square('2')

实行 flow check，报错以下：

$ flow check
Error ---------------------------------------------------------------------------- a.js:6:8

Cannot call `square` with `'2'` bound to `n` because string [1] is incompatible with number [2].

   a.js:6:8
   6| square('2')
             ^^^ [1]

References:
   a.js:2:19
   2| function square(n:number): number {
                        ^^^^^^ [2]

Found 1 error

将square('2')改成square(2)再flow check看下

$ flow check
Found 0 errors

或许将// @flow去掉，都邑提醒Found 0 errors

Flow服务器

启动: flow status
住手: flow stoop

删除flow范例标注

function square(n:number): number {中的范例标注，如:number，含有如许的js文件，事实上运转起来会报错的，不论是在nodejs照样浏览器中，如今在nodejs中运转测试下

$ node a.js
F:\youshengyouse\del\a.js:2
function square(n:number): number {
                 ^

SyntaxError: Unexpected token :
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)

将两个:number去掉再测试下，不会报错。所以说flow文件是两个历程，编程时加上范例搜检，末了制品代码中，得将一切的范例束缚要去掉，去掉这个历程一定不能人工操纵，有响应的顺序处置惩罚。现在有两个要领去掉范例注解，一是包flow-remove-types，二是在babel中去掉

要领一：flow-remove-types

官方文档：
https://flow.org/en/docs/tool…

装置

# 假如没有package.json文件，先天生
yarn add --dev flow-remove-types
# or
npm install --save-dev flow-remove-types

去范例

# 为了轻易，先将a.js移到src目次下
$ yarn run flow-remove-types src/ -d dist/
yarn run v1.12.3
$ F:\youshengyouse\del\node_modules\.bin\flow-remove-types src/ -d dist/
src\a.js
 ↳ dist\a.js
Done in 0.30s.

去范例前

// @flow
function square(n:number): number {
    return n * n;
}

square(2)

去范例后

//      
function square(n       )         {
    return n * n;
}

square(2)

要领二：Babel的预置babel-preset-flow

装置

yarn add --dev babel-cli            # 凡需要在敕令行实行babel，得装置babel-cli
yarn add --dev babel-preset-flow    # 目标就是去除范例

提醒： babel在没有设置时，也不认识范例，也会报错，如没有设置就转码，会报错以下

$ ./node_modules/.bin/babel src -d dist
SyntaxError: src/a.js: Unexpected token, expected , (2:17)
  1 | // @flow
> 2 | function square(n:number): number {
    |                  ^
  3 |     return n * n;
  4 | }
  5 |

如今设置预置看下，新建设置文件 .babelrc，内容以下

{
  "presets": ["flow"]
}

再实行

$ ./node_modules/.bin/babel src -d dist
src\a.js -> dist\a.js

没有报错，翻开dist/a.js看下，内容以下

function square(n) {
    return n * n;
}

square(2);

范例束缚悉数去掉了。检察flow预置源码，实在它只是包装了@babel/plugin-transform-flow-strip-types这个插件罢了，干活的是这个插件，翻开源码，实在比较好明白，就是删除// @flow及范例

范例自动搜检

上面运用flow check来举行范例搜检，不是很轻易，我想babel的插件来举行范例搜检，并在编辑器如vs code中自动搜检，如许效力就会高许多，这就要用到插件babel-plugin-typecheck，它与预置flow的功用完整不一样，babel-plugin-typecheck是搜检代码中的范例是不是有错，babel-preset-flow是担任删除范例的，如许js代码在实行时就好象从来没有加过范例一样。

在vs code中设置范例

在VS Code中搜刮flow，发明有vscode-flow-ide、Flow-Language-Support两个插件，在这里以vscode-flow-ide为例
先装置vscode-flow-ide
前提：

  1. 项目根目次有设置文件.flowconfig
  2. nodejs增加到了环境变量path中
  3. 全局或项目内装置了flow,引荐全局装置flow-bin

设置(默许就行)
VS Code左下角治理/设置/User Settings/Extensions/Flow-IDE Configurations(只要启用后才设置，不然找不到这项)，下面是文字版，实际上在面板中就能够设置

  • flowide.enable: 启用/封闭
  • flowide.pathToFlow: Absolute path to the Flow executable. Set it only if the default behaviour of the extension doesn’t work out for you. The extension will try first to read it from local node_modules/flow-bin or globally if not otherwise set here.
  • flowide.useCodeSnippetsOnFunctionSuggest – Add the function paramters when selecting a function to autocomple.

重启vs Code，就会发明能够报错了，如今能够去掉顶部的// @flow及通报分歧请求的参数测试下。

假如在problem窗口有毛病，[ts]'types' can only be used in a .ts file. 8010，请在扩大中找到typescript，找到”javascript.validate.enable”: false

总结：

  • 范例搜检只管在编辑器中设置
  • 删除范例只管在babel中自动完成
    原文作者：advance100
    原文地址: https://segmentfault.com/a/1190000017778886
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞