如何在 Nuxt.js 中实现流类型

Question

我目前正在尝试将我们现有的 vue.js 项目转换为 nuxt.js。我无法在 nuxt.js 中添加流类型支持。当我运行流服务器时，它说没有错误！但是运行 npm run dev 时，它会在流语法上抛出错误。

.flowconfig

[include]
pages/**/.*
components/**/.*
layouts/**/.*
apiRoutes/.*
store/.*
utils/.*


[ignore]
.*/build/.*
.*/config/.*
.*/dist/.*
.*/node_modules/.*
.*/static/.*
.*/test/.*
.*/ssl/.*
.*/.nuxt/.*

[libs]
./flow/

[options]
emoji=true
module.file_ext=.vue
module.file_ext=.js
server.max_workers=3
log.file=./flow.log
suppress_comment= \\(.\\|\n\\)*\\$FlowFixMe
unsafe.enable_getters_and_setters=true
module.system.node.resolve_dirname=node_modules
module.name_mapper='^.*\.css$' -> 'empty/object'
module.name_mapper='^.*\.js$' -> 'empty/object'
module.name_mapper='^@/\(.*\)$' -> '<PROJECT_ROOT>/\1'

我已经添加了所有必要的 babel 和 eslint 包。

.babelrc
{
  "presets": [
    ["env", { "modules": false }],
    "stage-2",
    ["es2015", {"modules": false }],
    "flow-vue"
  ],
  "plugins": [
    "transform-runtime",
    "transform-class-properties",
    "syntax-flow",
    "transform-flow-strip-types"
  ],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

---

.eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    jquery: true
  },
  extends: [
    'standard',
    'plugin:flowtype/recommended'
    // 'plugin:vue/recommended'
  ],
  // required to lint *.vue files
  plugins: [
    'html',
    'flowtype-errors',
    'flowtype'
  ],
  // add your custom rules here
  rules: {
    'flowtype-errors/show-errors': 2,
    // allow paren-less arrow functions
    'arrow-parens': 0,
    'semi': ["error", "always"],
    // allow async-await
    'generator-star-spacing': 0
  },
  globals: {}
}

在运行 npm run dev 时，它不解析 flowtype 语法

Answer 1

我建议关注instructions on the flow website 来设置 Babel。特别是有一个预设，因此您不需要配置单独的规则。然后你实际上需要运行 Babel（同样，网站上有说明）。一旦你运行了 Babel，你应该可以在 Node 中运行它输出的代码了。