代码之家 › 专栏 › 技术社区 › Limbo

TypeScript+VSCode中的自定义模块解析

visual-studio-code webpack typescript reactjs

Limbo · 技术社区 · 7 年前

我有以下项目结构:

<PROJECT_FOLDER>
âââ node_modules
âââ src
â   âââ components
â   â   âââ MyAwesomeComponent.tsx
â   âââ views
â   â   âââ MyAwesomeView
â   â       âââ index.tsx
â   âââ Application.tsx
â   âââ index.tsx
âââ webpack.config.js
âââ tsconfig.json

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "moduleResolution": "classic",
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "sourceMap": true,
        "noImplicitReturns": true,
        "experimentalDecorators": true,

        "baseUrl": ".",
        "paths": {
            "*": [
                "src/*",
                "node_modules/*"
            ]
        },
    }
}

假设我有 react 在里面 node_modules (甚至 @types/react 已安装)。例如,当我试图导入 import * as React from "react" 或 import MyComponent from "components/MyAwesomeComponent ,两个导入都与消息错误无关 “找不到模块…” 等等。

在编写导入字符串时,VSCode建议我使用 节点模块 src/* .

相对进口仍然有效,但这是地狱,你知道。

非常感谢您的帮助!

更新

我改变了我的 moduleResolution node 并设置@Alserda共享的配置(谢谢您的回答,但看起来我做错了,因为您的配置无法解决问题)。然后我建议 tsc --traceResolution 节点模块 ,但仍然无法解决我的 components/MyAwesomeComponent :

好吧,我的 webpack.config.js 是否已经有相应的模块

webpack-dev-server ,我相信VSCode不使用 webpack.config.js文件 配置项目的信息:)

更新3

这里是 组件/MyAwesomeComponent 导入:

======== Resolving module 'components/MyAwesomeComponent' from '/home/username/path/to/project/src/Application.tsx'. ========
Explicitly specified module resolution kind: 'NodeJs'.
'baseUrl' option is set to '/home/username/path/to/project/src', using this value to resolve non-relative module name 'components/MyAwesomeComponent'.
Resolving module name 'components/MyAwesomeComponent' relative to base url '/home/username/path/to/project/src' - '/home/username/path/to/project/src/components/MyAwesomeComponent'.
Loading module as file / folder, candidate module location '/home/username/path/to/project/src/components/MyAwesomeComponent', target file type 'TypeScript'.
File '/home/username/path/to/project/src/components/MyAwesomeComponent.ts' does not exist.
File '/home/username/path/to/project/src/components/MyAwesomeComponent.tsx' exist - use it as a name resolution result.
======== Module name 'components/MyAwesomeComponent' was successfully resolved to '/home/username/path/to/project/src/components/MyAwesomeComponent.tsx'. ========

最终更新

VSCode没有从我的 tsconfig.json配置 即使在之后 Reload TypeScript project . 我刚重新启动,现在一切正常!:)

1 回复 | 直到 7 年前

Alserda 6 年前

您可能需要添加此密钥:

...
"include": [
    "src/**/*"
],
...

这个 path alias 输入您的网页包配置,例如:

alias: {
  core: resolve(__dirname, '../src/services/core'),

(你有你的 context src 文件夹)。

路径

    "paths": {
        "core/*": ["./services/core/*"],

(与您的文件夹为 baseURL

我总是对TypeScript&React.js使用以下配置。这对我的多个项目都很有用。

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es3",
        "moduleResolution": "node",
        "baseUrl": "src",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "strict": false,
        "sourceMap": true,
        "outDir": "dist/",
        "jsx": "react",

        "allowJs": true,
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "types": [ "node" ],
        "lib": ["es6", "dom"]
    },
    "include": [
        "src/**/*"
    ]
}

如果你在使用 awesome-typescript-loader ,我还包括:

    "awesomeTypescriptLoaderOptions": {
        "useCache": true,
        "forceIsolatedModules": true
    }

编辑:

const path = require('path');
...
context: path.resolve(__dirname, './src'),
resolve: {
  modules: ['src', 'node_modules']
...