rootDir 和 outDir 的意外行为答案

【问题标题】：Unexpected behaviour of rootDir and outDirrootDir 和 outDir 的意外行为
【发布时间】：2017-03-27 12:38:02
【问题描述】：

我正在尝试将 TypeScript 与 React Native 一起使用。

这是我的tsconfig.json：

{
    "compilerOptions": {
        "target": "es2015",
        "module": "es2015",
        "jsx": "react",
        "outDir": "build",
        "rootDir": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "sourceMap": true
    },
    "filesGlob": [
        "typings/index.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "build",
        "node_modules"
    ],
    "compileOnSave": false
}

我希望将 src 目录中的所有 .ts(x) 文件编译到 build 目录中。

预期：

MyAwesomeReactNativeApp/
├── src/
│   └── index.tsx
└── build/
    └── index.js

得到：

MyAwesomeReactNativeApp/
├── src/
│   └── index.tsx
└── build/
    ├── src/
    │   └── index.js
    ├── index.android.js
    ├── index.ios.js
    └── __tests__/

编译器抱怨：

error TS6059: File '[...]/__tests__/index.android.js' is not under 'rootDir' '[...]/src'. 'rootDir' is expected to contain all source files.
error TS6059: File '[...]/__tests__/index.ios.js' is not under 'rootDir' '[...]/src'. 'rootDir' is expected to contain all source files.
error TS6059: File '[...]/index.android.js' is not under 'rootDir' '[...]/src'. 'rootDir' is expected to contain all source files.
error TS6059: File '[...]/index.ios.js' is not under 'rootDir' '[...]/src'. 'rootDir' is expected to contain all source files.

我在这里做错了什么？

提前谢谢你！

【问题讨论】：

[...]s 是否不同（特别是大小写不同）？我在我的 Mach 上看到类似的东西，错误是 error TS6059: File '/Users/[...]' is not under 'rootDir' '/users/[...]'. 'rootDir' is expected to contain all source files.。一个是/Users，另一个是/users。

标签： typescript react-native

【解决方案1】：

我偶然发现了同样的问题。我认为当您使用 react-native-cli 初始化项目并使用 react-native run-ios/run-android 测试项目时会发生这种情况。然后开始将项目转换为 react-native typescript 项目。这会在以后创建“正常”的 react-native 构建工件和 typescript 构建工件。

对我来说，将 __tests__ 放入 tsconfig.json 的排除项中很有帮助。

{
"compilerOptions": {
    "module": "es2015",
    "target": "es2015",
    "jsx": "react",
    "outDir": "build",
    "rootDir": "src",
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "allowJs": true,
    "sourceMap": true
},
"filesGlob": [
    "typings/index.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
],
"exclude":[
    "index.android.js",
    "index.ios.js",
    "build",
    "node_modules",
    "__tests__"
],
"compileOnSave": false

}

【讨论】：

【解决方案2】：

我收到了关于文件不在“rootDir 下”的类似错误消息。在我的例子中，它是针对 Web 项目而不是 React Native，但解决方案可能是相同的。

问题是我使用单个 ts-loader 规则从包含 tsconfig.json 文件的多个路径（例如node_modules/moduleA/src/.*\.ts、node_modules/moduleB/src/.*\.ts）加载；因此，ts-loader 会在其中一个节点模块文件夹中“找到项目 tsconfig.json”，然后抱怨其他节点模块的文件不在其 rootDir 路径中。

解决方案：为每个节点模块文件夹使用单独的 ts-loader 规则+实例。

示例：https://github.com/Venryx/vwebapp-framework/blob/8879154136e28800158e581f146bbb382092d7d3/Scripts/Build/WebpackConfig.ts#L291

就是这样！在我的项目中解决了问题，无需修改任何包的 tsconfig.json 文件等。

附：关于这个主题的一些额外背景：https://github.com/TypeStrong/ts-loader/issues/647

【讨论】：