typescript - 使用 typescript 的 React Native 无法解析模块

Question

这很尴尬，但我不知道还能做什么。我想将我的 React Native 小项目移植到 TypeScript，所以我使用 TypeScript 模板创建了一个空的 React Native 项目，调整了 tsconfig.json 以使用自定义路径，例如 @app我试着运行它。它没有。这是昨天的事，我做了一些谷歌搜索，但那些有同样问题的人建议清理打包程序，删除 node_modules 并重新安装包，例如 this one ，所以我做了，但没有用。

这些是我重新安装 react-native-cli 的步骤(起初我以为问题出在过时的包上，但事实并非如此):

• npm uninstall -g react-native-cli
• yarn global add @react-native-community/cli

下面那些我已经关注了很多次，我不记得确切的数字了:

• npx react-native init MyApp --template react-native-template-typescript
• yarn add redux redux-logger redux-thunk react-redux
• yarn add --dev @types/react @types/react-redux @types/redux-logger

然后对 tsconfig.json 进行更改，所以它看起来像这样(我的更改标记为 ->):

{
  "compilerOptions": {
    /* Basic Options */
    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "esnext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom", "esnext"],                 /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "noEmit": true,                           /* Do not emit outputs. */
    "incremental": true,                      /* Enable incremental compilation */
    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

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

    /* Module Resolution Options */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
->  "baseUrl": "./src",                       /* Base directory to resolve non-absolute module names. */
->  "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
->    "@app/*": ["./*"]
->  },
    "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'. */    
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

我的项目结构是这样的:

MyApp
├── ios
├── android
├── src
│   ├── index.tsx
│   ├── constants
│   │   └── app.json
│   ├── support   
│   │   └── store.tsx   
│   └── reducers   
│       └── index.tsx
├── tsconfig.json
├── package.json
├── index.js 
└── [ the rest ]

当我尝试从 MyApp/src/index.tsx 中的“@app/support/store”导入 {initStore} 时，Metro 给了我以下:

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `@app/support/store` from `src/index.tsx`: @app/support/store could not be found within the project.

然后我尝试使用以下命令进行清理，但也没有任何效果:

• 守望者 watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/&& npm cache verify && npm install && npm start -- --reset-cache

但是，有趣的是，在我调整了 tsconfig.json 之后，Atom 不会提示像 @app/support/store 这样的路径，它甚至提供了自动完成功能，它将 @app/support/ 识别为目录，将 @app/support/store 识别为脚本，所以我假设 tsconfig.json 不是问题。

Answer 1

似乎问题出在 babel 配置上。你需要运行

yarn add --dev babel-plugin-module-resolver

安装 module-resolver 然后调整 babel.config.js 使其看起来像这样:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          '^@app/(.+)': './src/\\1',
        },
      },
    ],
  ],
}