ts-loader：从其他 Yarn 工作区导入 .ts 模块答案

【问题标题】：ts-loader: import .ts module from other Yarn workspacets-loader：从其他 Yarn 工作区导入 .ts 模块
【发布时间】：2018-09-27 10:23:57
【问题描述】：

我的 Yarn 工作区结构如下：

/project
  package.json
  /packages
    /app
      package.json
      webpack.config.js
      tsconfig.json
      /src
        index.ts
    /api-adapter
      package.json
      /src
        api.ts

为了构建/app 包，我使用带有 ts-loader 的 Webpack。这是配置：

// /packages/app/webpack.config.js
module.exports = {
    entry: path.resolve(__dirname, "src/client/index.ts"),
    mode: "development",
    devtool: "inline-source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    output: {...}
};

和tsconfig.json

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "noImplicitAny": true,
    "outDir": "./dist/",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "lib": ["dom", "es6", "webworker"]
  }
}

当我想从其他工作区导入模块时：

// /packages/app/src/index.ts
import { fetchSomething } from "api-adapter/src/api";

发生错误：

ERROR in ../api-adapter/src/api.ts
Module build failed (from /home/user/project/node_modules/ts-loader/index.js):
Error: Typescript emitted no output for /home/user/project/packages/api-adapter/src/api.ts.

但是当我添加扩展以导入时，一切正常：

// /packages/app/src/index.ts
import { fetchSomething } from "api-adapter/src/api.ts";

如何修复 webpack 配置以将任何工作区模块导入为没有扩展的 Typescript？

我已经试过了：

rules: [{
  test: /\.tsx?$/,
  use: "ts-loader",
  exclude: /node_modules/,
  include: [
    __dirname,
    path.resolve(__dirname, "../packages")
  ],
}]

与：

ERROR in ../api-adapter/src/api.ts 3:34
Module parse failed: Unexpected token (3:34)
You may need an appropriate loader to handle this file type.

【问题讨论】：

将 "include": ["src/**/*.ts", "../api-adapter/**/*.ts"] 添加到 packages/app/tsconfig.json 为我修复了错误，但我不知道这是否是正确的解决方案，而且我不知道 ts-loader 足以解释发生了什么在这里。
你是对的。 ts-loader 使用tsconfig.json，所以我不得不把include 放在那里。谢谢。

标签： typescript webpack yarnpkg ts-loader yarn-workspaces

【解决方案1】：

Webpack 配置正确。 ts-loader找到一个文件，但编译器拒绝了它：Error: Typescript emitted no output因为路径：

// tsconfig.json
{
    "compilerOptions": {
      ...
    },
    "include": [
        "src/**/*",
        "../../packages/**/*"
    ]
}

【讨论】：