webpack 无法解析 tsc 生成的非相对路径

Question

我有以下 tsconfig.json 用于其他包使用的包，我们称之为packageA：

{
  "compilerOptions": {
    "baseUrl": ".",
    "checkJs": false,
    "declaration": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "./tests",
    "./dist",
    "src/**/*.test.ts",
    "src/**/*.test.tsx"
  ]
}

packageA 具有非相对路径，例如

import { T } from 'src/components/Translations';

tsc 将其转换为：

var Translations_1 = require("src/components/Translations").

当我使用消耗 packageA 的 webpack 编译不同的包 (packageB) 时出现问题

我在packageA 的package.json 中有main，如下所示：

  "main": "dist/index.js",
  "types": "dist/index.d.ts"

index.ts 有这样的出口：

export * from 'src/selectors/ui';

转译成这个

__exportStar(require('src/selectors/ui'), exports);

当我编译 packageB 时，它消耗了 packageA 作为依赖项。

import { selector } from 'packageA;

这将加载node_modules/packageA/dist/index.js

ts-loader 发出以下错误

`找不到模块：'src/selectors/ui'。

问题是来自packageA 的转译代码看起来像这样。

__exportStar(require('src/selectors/ui'), exports);

但dist 文件夹看起来像这样：

|
ui
|
translations

src 在tsconfig.json 中用outDir 指定的dist 目录中不存在

我尝试像这样在 webpack 中添加别名：

alias: {
  'webpack/hot/poll': require.resolve('webpack/hot/poll'),
  src: 'dist',
},

这实际上确实为packageA 修复了它，但是这打破了packageB 的分辨率，该分辨率也具有非相对导入，例如：

import { App } from 'src/containers'

问题是src 被映射到dist，正如我在 webpack 输出中看到的那样

aliased with mapping 'src': 'dist' to 'dist/containers/App'

当然，我得到了错误

找不到模块：'src/containers/App'

我可以将src 映射到dist 仅针对特定模块而不是所有模块吗？

如果packageA 有相对路径，一切正常。

Answer 1

可以通过将src添加到webpack.config.js中已解析的模块来解析绝对路径。

可以在here 找到有关 webpack 模块解析工作原理的高级概述。

配置详情见here。

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};
reso

Answer 2

在这种情况下，我建议将您视为库的packageA 更改为使用https://www.npmjs.com/package/ttypescript 构建，您可以在其中使用插件来转换非相对-> 在我们构建事物时的相对路径。这是有用的插件https://www.npmjs.com/package/typescript-transform-paths。那么您的tsconfig 文件将如下所示：

"compilerOptions": {
  "baseUrl": ".",
  "outDir": "./dist",
  "paths": {
    "src/*": ["./src/*"]
  },
  "declaration": true,
  "plugins": [
    { "transform": "typescript-transform-paths" },
    { "transform": "typescript-transform-paths", "afterDeclarations": true }
  ]
},

在您的包脚本构建中，您还必须更改 tsc -> ttsc：

"scripts": {
  "build": "ttsc"
},

Answer 3

我曾经遇到过这个问题，我对非相对路径问题的解决方案是使用 path 属性，如下所示。这将在将组件从 import { T } from 'src/components/Translations'; 导入到 import { T } from 'components/Translations'; 时更改您的 require 路径，我更喜欢但可以进行调整。查看 TypeScript 手册了解更多信息：https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

    {
        "compilerOptions": {
        "baseUrl": ".",
        "paths": {
               "*": ["src/*", "node_modules/*"]
        },
        "checkJs": false,
        "declaration": true,
        "downlevelIteration": true,
        "esModuleInterop": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es5"
      },
      "include": [
        "src/**/*.ts",
        "src/**/*.tsx"
      ],
      "exclude": [
        "./tests",
        "./dist",
        "src/**/*.test.ts",
        "src/**/*.test.tsx",
        "moduleResolution": "node",
      ]
    }