在package.json

Question

我最近创建了一个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的别名，但是我对用法并不确定，我认为节点依赖项应该是处理所需行为的最佳方法。

谢谢

Answer 1

我认为一个更好的选择（肯定可以与Typescript编译器一起使用）是仅在tsconfig.json的path节点中定义这些路径别名，并使用tsconfig-paths-webpack-plugin，因此webpack是意识到他们。 我认为TS编译器无法结合package.json依赖项来解决它们。