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

Question

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

如果我运行flow check，没有错误，当我运行yarn run dev，我得到一个语法错误。

（我知道那里有这些unanswered questions，我再次提出同样的问题，希望这次它能到达一些对此事有了解的人。）

谢谢

Answer 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

接下来，我们需要配置 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 类型检查。

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

How to add flow (flowtype) support in nuxt?

webpack

vue.js

flowtype

babeljs

nuxt.js

通天塔

Eslint

.flowconfig

nuxt.config.js