Búsqueda de sitios web

typescript - ts-loader genera archivos de declaración en un subdirectorio al importar archivos .json

Estoy teniendo un comportamiento extraño con mi ts-loader: Al importar archivos *.json desde node_modules, los archivos de declaración se generan en una subcarpeta de dist/, pero espero que estén directamente en la carpeta dist/.

Tengo la siguiente estructura de proyecto:

Project/
├── src/ 
│   ├── components/
│   │   └── PhoneNumberInput/
│   │       ├── index.ts
│   │       └── utils.ts
│   └── index.ts
├── package.json
├── tsconfig.json
└── webpack.config.js

Al ejecutar webpack (usando el ts-loader) espero la siguiente estructura de carpeta de salida:

Project/
├── dist/ 
│   ├── components/
│   │   └── PhoneNumberInput/
│   │       ├── index.d.ts
│   │       └── utils.d.ts
│   ├── index.d.ts
│   └── index.js
└── ...

Este fue el caso hasta que comencé a importar un archivo .json (desde node_modules/) dentro de mi utils.ts:

import * as de from "react-phone-number-input/locale/de.json";

Los archivos de declaración ahora se generan en dist/src/:

Project/
├── dist/ 
│   ├── src/
│   │   ├── components/
│   │   │   └── PhoneNumberInput/
│   │   │       ├── index.d.ts
│   │   │       └── utils.d.ts
│   │   └── index.d.ts
│   └── index.js
└── ...

Cualquier importación relativa a los assets ahora está rota. Si uso el awesome-typescript-loader o importo un .json desde el proyecto

import * as de from "./countries.json";

No entiendo la subcarpeta src/.

¿Alguien tiene alguna idea de dónde proviene este comportamiento? ¿Qué estoy haciendo mal? ¿O tal vez es un error en el ts-loader? El proyecto de ejemplo se puede encontrar en https://github.com/psalchow/ts-path-test

Aquí están los archivos de configuración relevantes:

package.json

{
  "name": "ts-path-test",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "webpack --progress --mode=production"
  },
  "dependencies": {
    "react-phone-number-input": "^3.1.19"
  },
  "devDependencies": {
    "@types/react-phone-number-input": "^3.0.6",
    "@types/webpack": "^5.28.0",
    "awesome-typescript-loader": "^5.2.1",
    "ts-loader": "^8.1.0",
    "typescript": "^4.2.4",
    "webpack": "^4.46.0",
    "webpack-cli": "^4.6.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": false,
    "baseUrl": "src",
    "declaration": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2019"
  },
  "files": ["src/index.ts"]
}

webpack.config.js

module.exports = () => {
  return {
    entry: {
      index: './src/index.ts',
    },
    output: {
      filename: '[name].js',
      libraryTarget: 'umd',
      library: 'DummyComponent',
      umdNamedDefine: true,
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
    },
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          // loader: 'awesome-typescript-loader',
          loader: 'ts-loader',
        },
      ],
    },
  };
};

Respuesta #1

Sé que esta pregunta no se ha tocado durante mucho tiempo. Con la versión actual (9.4.3) de ts-loader este problema ya no ocurre y todo se genera como se espera directamente en la carpeta dist (sin ninguna subcarpeta src). El repositorio de prueba ha sido actualizado en consecuencia: https://github.com/psalchow/ts-path-test

Artículos relacionados