查找 `tsconfig.json`

问题描述

我有以下目录结构：

.
├── \ .babelrc
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon48.png
│   ├── manifest.json
│   └── popup.html
├── src
│   ├── App.tsx
│   ├── background.ts
│   ├── components
│   │   ├── Main.tsx
│   │   ├── Options.tsx
│   │   ├── SiteImage.tsx
│   │   ├── TrafficSignal.tsx
│   │   └── index.ts
│   ├── content.ts
│   ├── custom.d.ts
│   ├── popup.tsx
│   ├── store
│   │   ├── FrameItContext.tsx
│   │   ├── FrameItStore.ts
│   │   └── index.ts
│   ├── styles
│   │   ├── popup.css
│   │   └── tailwind.css
│   └── types
│       └── index.ts
├── tailwind.config.js
├── tsconfig.json
└── webpack.config.js

tsconfig.json 看起来像：

{
    "compilerOptions": {
        "baseUrl": "node_modules","paths": {
            "@/*": ["../src/*"]
        },"outDir": "./dist/","sourceMap": true,"strict": true,"noImplicitReturns": true,"noImplicitAny": true,"module": "es6","moduleResolution": "node","target": "es5","allowJs": true,"jsx": "react",},"exclude": ["node_modules"],"include": [
        "./src/**/*","src/custom.d.ts"
    ]
}

我的 App.tsx 看起来像：

import { Main } from '@/components/index'
import { config,FrameItProvider } from '@/store/index'

TS 错误看起来像：

ERROR in ./src/App.tsx 2:0-42
Module not found: Error: Can't resolve '@/components/index'

ERROR in ./src/App.tsx 3:0-48
Module not found: Error: Can't resolve '@/store/index'

我该如何解决这个问题？我正在关注Next.js absolute imports structure。

甚至尝试过：

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

但是还是报错。我该如何解决？

我也有 webpack.config.js，它看起来像：

const webpack = require('webpack')
const path = require('path')
const copyPlugin = require('copy-webpack-plugin')

const config = {
  entry: {
    popup: path.join(__dirname,'src/popup.tsx'),content: path.join(__dirname,'src/content.ts'),background: path.join(__dirname,'src/background.ts'),output: { path: path.join(__dirname,'dist'),filename: '[name].js' },module: {
    rules: [
      {
        test: /\.(js|jsx)$/,use: 'babel-loader',exclude: /node_modules/,{
        test: /\.css$/,use: ['style-loader','css-loader','postcss-loader'],exclude: /\.module\.css$/,{
        test: /\.ts(x)?$/,loader: 'ts-loader',use: [
          'style-loader',{
            loader: 'css-loader',options: {
              importLoaders: 1,modules: true,],include: /\.module\.css$/,{
        test: /\.svg$/,use: 'file-loader',{
        test: /\.png$/,use: [
          {
            loader: 'url-loader',options: {
              mimetype: 'image/png',resolve: {
    extensions: ['.js','.jsx','.tsx','.ts'],alias: {
      'react-dom': '@hot-loader/react-dom',devServer: {
    contentBase: './dist',plugins: [
    new copyPlugin({
      patterns: [{ from: 'public',to: '.' }],}),}

module.exports = config

我是否必须在 webpack.config.js 中指定任何内容？因为 VSCode 自动完成工作正常。

解决方法

这是一个 webpack 问题，而不是我通过 https://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/ 发现的 TS

我保留了 tsconfig.json 原样：

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

我必须将以下代码添加到 webpack.config.js：

const fs = require('fs')

const srcPath = (subdir) => path.join(__dirname,'src',subdir)
const getFilesAndDirectories = (source) =>
    fs.readdirSync(source,{ withFileTypes: true }).map((dirent) => dirent.name)
let absoluteImports = {}
getFilesAndDirectories('src').forEach((fileName) => {
    const fileNameWithoutExtension = path.parse(fileName).name
    absoluteImports[`@/${fileNameWithoutExtension}`] = srcPath(fileName)
})

const config = {
    .
    .
    .
    resolve: {
        alias: {
            'react-dom': '@hot-loader/react-dom',...absoluteImports,}

成功了?