如何在nuxt中添加流（flowtype）支持？

Posted 2023-02-22

【中文标题】如何在nuxt中添加流（flowtype）支持？

【英文标题】：How to add flow (flowtype) support in nuxt?

【发布时间】：2018-05-25 21:48:36

【问题描述】：

我想为 nuxt 项目添加流支持（我的项目使用 webpack 和 babel）。我可以在某处找到一个可行的示例吗？

如果我运行flow check，则没有错误，当我运行yarn run dev 时，出现语法错误。

（我知道有这些 unanswered questions 在那里，我再次提出同样的问题，希望这次它会影响到一些对此事有知识的人。）

谢谢

【参考方案1】：

有很多东西需要配置。让我指导您完成此过程。

TLDR：使用wemake-vue-template。它带有nuxt、flow 和许多其他好东西。

通天塔

首先，我们需要配置babel。这就是你的babel 配置应该是这样的：

  "presets": [
    ["vue-app", 
      "useBuiltIns": true
    ],
    "flow"
  ]

使用npm install --save-dev babel-preset-flow babel-preset-vue-app 安装这些礼物。

埃斯林特

接下来，我们需要配置eslint 来检查我们的flow 文件。 .eslintrc 应该是这样的：

  "root": true,
  "plugins": [
    "flowtype-errors"
  ],
  "env": 
    "node": true,
    "browser": true
  ,
  "rules": 
    // raise flow errors
    "flowtype-errors/show-errors": 2,
    "flowtype-errors/show-warnings": 1,
    // "flowtype-errors/enforce-min-coverage": [2, 50]
  ,
  "parserOptions": 
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  

确保您已安装所有内容。

.flowconfig

这是最难的部分。您需要为flow 指定配置。根据您的设置，它可能会有所不同。

[ignore]
./nuxt/*
<PROJECT_ROOT>/node_modules/.*config-chain/test/broken.json

[include]
<PROJECT_ROOT>/client
<PROJECT_ROOT>/

[libs]

[lints]
all=warn
untyped-import=off
unsafe-getters-setters=off

[options]
include_warnings=true
esproposal.decorators=ignore
module.name_mapper='^~' -> '<PROJECT_ROOT>/client'
module.system.node.resolve_dirname=node_modules
module.system.node.resolve_dirname=client
module.file_ext=.vue
module.file_ext=.js

nuxt.config.js

最后一步。我们需要在每次更改时启用 linting。

 build: 
    extend (config,  isDev, isClient ) 
      if (isDev && isClient) 
        config.module.rules.push(
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        )
     
  

就是这样。现在您将进行 flow 类型检查。