如何在nuxt中添加流(flowtype)支持? [英] How to add flow (flowtype) support in nuxt?

问题描述

我想为nuxt项目添加流程支持(我的项目使用webpack和babel).我可以在某个地方找到有效的示例吗?

I want to add flow support to a nuxt project (my project uses webpack and babel). Can I find a working example somewhere?

如果我运行flow check，则没有错误，运行yarn run dev时出现发bun，会出现语法错误.

If I run flow check, there are no errors, bun when I run yarn run dev, I get a syntax error.

(我知道有这些未回答

(I know there are these unanswered questions out there, I raise the same issue again hoping this time it will reach some guys with knowledge on the matter.)

谢谢

推荐答案

有很多东西需要配置.让我指导您完成这个过程.

There a lot of things to configure. Let me guide you trough this process.

TLDR :使用 wemake-vue-template .它带有nuxt，flow和许多其他物品.

TLDR: use wemake-vue-template. It comes with nuxt, flow, and many other goodies.

首先，我们需要配置babel.这就是babel配置的样子:

First of all, we need to configure babel. That's how your babel configuration should look like:

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

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

接下来，我们需要配置eslint来整理我们的flow文件.这就是.eslintrc的样子:

Next, we need to configure eslint to lint our flow files. That's how .eslintrc should look like:

{
  "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"
  }
}

确保已安装所有内容.

Make sure that you have installed everything.

那是最难的部分.您需要指定flow的配置.视您的设置而定.

That's the hardest part. You need to specify configuration for flow. It may differ based on your setup.

[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

最后一步.我们需要在每次更改时启用棉絮.

nuxt.config.js

The last step. We need to enable linting on each change.

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

就是这样.现在，您将可以进行flow类型检查.

That's it. Now you will have working flow type checking.

这篇关于如何在nuxt中添加流(flowtype)支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！