web-dev-qa-db-fra.com

Webpack resolver.alias ne fonctionne pas avec le tapuscrit?

J'essaie de raccourcir mes importations en TypeScript

de import {Hello} from "./components/Hello";

à import {Hello} from "Hello";

Pour cela, j'ai découvert que vous pouvez utiliser resolve.alias dans webpack j'ai donc configuré cette partie comme suit

resolve: {
    root: path.resolve(__dirname),
    alias: {
        Hello: "src/components/Hello"
    },
    extensions: ["", ".ts", ".tsx", ".js"]
},

Webpack se construit et le bundle.js de sortie fonctionne. Cependant l'intellisense de TypeScript se plaint cannot find the module

Donc, ma question est de savoir si le fichier resol.alias de webpack fonctionne avec tapuscript?

J'ai trouvé ce qui suit issue mais il n'y a pas de réponse.

typescriptwebpack
26
starcorn

Si vous utilisez ts-loader, vous devrez peut-être synchroniser les paramètres de votre webpack alias/resolve avec votre paramètre paths dans votre tsconfig.json.

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "Hello": ["src/components/Hello"]
        }
    }
}

Si vous utilisez awesome-TypeScript-loader, le webpack peut le comprendre automatiquement à partir du paramètre paths dans votre tsconfig.json, selon le statut sur ce problème du repo . De cette façon, vous n'avez pas besoin de dupliquer les mêmes informations dans votre champ Webpack alias.

43
Daniel Rosenwasser

Mec, il vous manque un point très important dans tsconfig.json: le motif correspondant!

Il doit être configuré comme ceci:

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

Le "*" est la partie importante pour dire à TS de faire correspondre n'importe quoi sur le côté droit.

J'ai découvert cela à partir de cet article: https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-TypeScript-and-jest-fe461347e01 =

25
Caio Saldanha

Comme d'autres l'ont mentionné, vous devez fournir un alias dans votre webpack.config.js:

    resolve: { 

        extensions: ['.ts', '.js'],
        alias: {
            forms: path.resolve(__dirname, 'src/forms/')
        } 
    },

Cela doit être synchronisé avec votre tsconfig.json fichier (baseUrl et chemins sont requis).

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

Remarque: Le modèle générique est nécessaire pour correspondre à votre configuration d'alias de résolution.

Ensuite, vous pouvez importer n'importe quelle bibliothèque en utilisant votre alias:

import { FormsModule } from 'forms/my-forms/my-forms.module';
6
pixelbits

J'ai dû faire un petit ajustement à la solution de Caio Saldanha pour qu'elle fonctionne dans mon environnement.

J'utilise Babel 7 avec babel-plugin-module-resolver pour résoudre les alias. Non ts-loader ou awesome-TypeScript-loader car Babel 7 prend en charge TypeScript prêt à l'emploi à l'aide de @babel/preset-TypeScript. J'ai dû ajouter une configuration de chemin supplémentaire pour chaque alias pour charger la racine du module (par exemple index.ts) automagiquement:

"baseUrl": ".",
"paths": {  // this must be synchronized with .babelrc.js's module-resolver alias config
    "component": ["src/component/index.ts"],
    "component/*": ["src/component/*"],
    ...
}

Avoir un index.ts dans le /component dossier avec le contenu suivant:

export { default as Logo } from './Logo';

Sans extra .../index.ts ligne cette importation n'a pas fonctionné pour moi:

import { Logo } from 'component';

Configuration d'alias dans .babelrc.js:

plugins: [
[
    'module-resolver',
    {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        root: ['./src'],
        alias: {
        // this must be synchronized with tsconfig.json's path configuration
            component: './src/component',
        },
    },
],
2
AMilassin

Si quelqu'un a toujours ce problème, n'oubliez pas d'ajouter votre dossier à l'option "include" sur tsconfig.json comme ceci:

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "outDir": "./built/",
  "include": [
    "./src/**/*",
    "./tests/**/*"
  ]
}
0
Patrick Stival Chaerke