Babel-node 无法处理 Typescript 文件中导入的 flowtype 文件？答案

【问题标题】：Babel-node can't process flowtype files imported in Typescript file?Babel-node 无法处理 Typescript 文件中导入的 flowtype 文件？
【发布时间】：2021-11-12 18:40:06
【问题描述】：

我似乎遇到了一个奇怪的情况，我在互联网上找不到答案。在这种情况下，我认为我做的事情不正确或不符合标准。

上下文

一个开源的 React-Native 应用 (foodcoop-mobile-app)，目前使用 0.62.3 版本（兼容 iOS 9）
我所有的项目都是用 Typescript 4.3.5 编写的
TypeORM0.2.31
react-native-device-info6.2.1
react-native-fs2.18.0

问题

我的问题是运行 TypeORM CLI 来生成甚至在本地运行迁移以进行手动测试。

失败的尝试

使用 ts 节点

根据TypeORM docs regarding entity files in Typescript，我必须以某种方式运行ts-node 才能使其工作。我的问题似乎是在我的实体中，我有一些import of modules written in Flow，比如react-native-fs 或react-native-device-info。

$ yarn run typeorm migration:run
yarn run v1.22.17
warning ../package.json: No license field
$ node --require ts-node/register ./node_modules/typeorm/cli.js migration:run
Error during migration run:
/path/to/app/node_modules/react-native-fs/FS.common.js:30
var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
                             ^

SyntaxError: Unexpected token ':'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1025:15)
    at Module._compile (node:internal/modules/cjs/loader:1059:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/path/to/app/src/entities/Lists/ListAttachment.ts:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

好的，所以。我用 Typescript (ListAttachment.ts) 编写的实体有一个 import * as RNFS from 'react-native-fs';。这个库是written in Flow。据我了解，ts-node 只会将 Typescript 转换为 Javascript，因此当它遇到 .js 文件时，它无法解释 // @flow 注释并尝试将其解释为普通 JS。因此失败。

使用 babel-node

好的，所以。我的想法是使用 Babel 来处理这两种语言，但问题是一样的。据我了解，Babel 将使用基于文件扩展名的转译器。因此，如果我的主文件是 Typescript，如果导入在 Flow 中，它不会切换到另一个转译器（Flow 转译器）。

$ ./node_modules/.bin/babel-node --extensions ".flow,.js,.ts" ./node_modules/typeorm/cli.js migration:run
Error during migration run:
/path/to/app/node_modules/react-native-fs/FS.common.js:30
var normalizeFilePath = (path: string) => (path.startsWith('file://') ? path.slice(7) : path);
                             ^

SyntaxError: Unexpected token ':'
    at compileFunction (<anonymous>)
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1025:15)
    at Module._compile (node:internal/modules/cjs/loader:1059:27)
    at Module._compile (/path/to/app/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Object.newLoader [as .js] (/path/to/app/node_modules/pirates/lib/index.js:104:7)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)

提问时间！

但是 React-Native 的 Metro 如何处理这些混合导入？

我应该从我的实体中删除任何外部导入吗？（最佳实践？）

我做错了吗？（当然：D）

谢谢各位开发者????

文件参考

babel.config.js

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "*": ["types/*"] },
    /* Basic Options */
    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "noEmit": true,                           /* Do not emit outputs. */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "strictNullChecks": true,                 /* Enable strict null checks. */

    /* Module Resolution Options */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    /* Experimental Options */
    "experimentalDecorators": true,           /* Enables experimental support for ES7 decorators. */
    "emitDecoratorMetadata": true,            /* Enables experimental support for emitting type metadata for decorators. */

    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
  ],
}

.flowconfig

[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore templates for 'react-native init'
<PROJECT_ROOT>/template/.*

; Ignore the Dangerfile
<PROJECT_ROOT>/bots/dangerfile.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; These should not be required directly
; require from fbjs/lib instead: require('fbjs/lib/warning')
.*/node_modules/warning/.*

; Flow doesn't support platforms
.*/Libraries/Utilities/LoadingView.js

[untyped]
.*/node_modules/@react-native-community/cli/.*/.*

[include]

[declarations]
.*/node_modules/.*

[libs]
interface.js
flow/

[options]
emoji=true

esproposal.optional_chaining=enable
esproposal.nullish_coalescing=enable

exact_by_default=true

module.file_ext=.js
module.file_ext=.json
module.file_ext=.ios.js

munge_underscores=true

module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/index.js'
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/\1'
module.name_mapper='^@?[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/Libraries/Image/RelativeImageStub'

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState
suppress_type=$FlowFixMeEmpty

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

experimental.well_formed_exports=true
experimental.types_first=true
experimental.abstract_locations=true

[lints]
sketchy-null-number=warn
sketchy-null-mixed=warn
sketchy-number=warn
untyped-type-import=warn
nonstrict-import=warn
deprecated-type=warn
unsafe-getters-setters=warn
inexact-spread=warn
unnecessary-invariant=warn
signature-verification-failure=warn
deprecated-utility=error

[strict]
deprecated-type
nonstrict-import
sketchy-null
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import

[version]
^0.113.0

【问题讨论】：

标签： typescript react-native babeljs typeorm flowtype

【解决方案1】：

使用 babel-node 应该可以工作（因为 AFAIK 的 TypeScript 编译器 - ts-node 使用 - 不能剥离 Flow 类型），但你需要一个在 .js 文件和 @987654325 上都使用 @babel/preset-flow 的 Babel 配置@ on .ts 文件，例如（未测试）：

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-flow'],
  overrides: {
    test: /\.tsx?$/,
    presets: [
      '@babel/preset-env',
      '@babel/preset-react',
      [
        '@babel/typescript',
        {
          allExtensions: true,
          isTSX: true,
        },
      ],
    ],
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
  },
};

【讨论】：