在 package.json 中定义的 Webpack Typescript 相对依赖答案

【问题标题】：Webpack Typescript relative dependency defined in package.json在 package.json 中定义的 Webpack Typescript 相对依赖
【发布时间】：2018-12-10 16:11:36
【问题描述】：

我最近创建了一个 React-Native 应用程序，并使用了在每个文件夹的 package.json 中定义的相对依赖项，以避免 ../../../ 之类的路径。

我必须创建一个 React (DOM) 应用程序，所以我创建了自己的 webpack 配置并希望重现相同的行为。

所以我有：

./app/package.json:

{
    "name": "app",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
        "test-service": "file:./services/Test",
        "home-screen": "file:./screens/Home"
    }
}

./app/screens/Home/package.json：

{
    "name": "home-screen",
    "version": "1.0.0",
    "private": true,
    "dependencies": {}
}

./webpack.config.js:

{
    //...
    resolve: {
        descriptionFiles: ['package.json'],
        alias: {
            app: path.resolve(sourcePath)
        },
        modules: [path.resolve(sourcePath), 'node_modules'],
        extensions: ['.js', 'jsx', '.ts', '.tsx'],
        mainFields: ['module', 'main']
    },
    //...
}

./tsconfig.json:

{
    //...
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "baseUrl": "./app",
    "paths": {
        "app/*": ["./*"]
    },
    //...
}

./app/App.tsx（入口点）

import { Screen } from 'home-screen'
//...

webpack 告诉我他找不到`home-screen` 模块！

错误日志：https://pastebin.com/ai14n74h

您知道如何解决此问题并将 package.json 依赖项用作别名吗？

我已经使用了 webpack 的别名，但我不相信这种用法，我认为节点依赖应该是处理我需要的行为的最佳方式。

谢谢

【问题讨论】：

标签： node.js typescript webpack dependencies package.json

【解决方案1】：

我认为一个更好的选择，并且肯定可以与 typescript 编译器一起使用，将只在 tsconfig.json 的路径节点中定义那些路径别名，并使用 tsconfig-paths-webpack-plugin 所以 webpack 是知道他们。我认为 TS 编译器无法结合 package.json 依赖项来解决它们。

【讨论】：

package.json 依赖项适用于 React-Native（和 ts），所以我认为问题与 webpack 有关。

webpack 告诉我他找不到home-screen 模块！

webpack 告诉我他找不到`home-screen` 模块！