Webpack résoudre.alias ne fonctionne pas avec la machine?

J'ai essayer de raccourcir mon importations en caractères d'imprimerie

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

à import {Hello} from "Hello";

Pour que j'ai trouvé, vous pouvez utiliser resolve.alias dans webpack donc j'ai configuré la partie comme suit

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

Webpack construit, et la sortie bundle.js des œuvres. Cependant tapuscrit de l'intellisense se plaindre il cannot find the module

Donc ma question est de savoir si ou de ne pas webpack de la résoudre.alias fonctionne avec tapuscrit?

J'ai trouvé la suite question mais il n'y a pas de réponse.

OriginalL'auteur starcorn | 2016-11-05

typescript webpack

23

Si vous utilisez ts-loader, vous pourriez avoir à synchroniser votre webpack alias/resolve paramètres avec votre paths paramètre dans votre tsconfig.json.
```
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "Hello": ["src/components/Hello"]
        }
    }
}
```
Si vous utilisez awesome-typescript-loader, puis webpack peut comprendre cela automatiquement à partir de la paths paramètre dans votre tsconfig.json, comme par l'état sur cette question, le repo. De cette façon, vous n'avez pas besoin de dupliquer les mêmes informations dans votre Webpack alias champ.

Semble que j'ai besoin de définir la paths bien aussi quand je suis en utilisant awesome-typescript-loader. Je suis en utilisant webpack1, et génial-tapuscrit-chargeur 1.1.1. Mais ça marche bien 🙂
Cela a réussi à me faire pour une deuxième fois.. assurez-vous de définir le baseUrl si vous êtes à la configuration des chemins d'accès. Vous avez besoin des deux.
nouveau projet angulaire de la cli, l'ajout app/composants dossier, le déplacement de l'application.comonent sous elle dans son propre dossier. tscinfig: ajout de baseUrl:"." et les chemins d'accès:{"~c": ["src/app/composants"]} (c comme les composants). l'ajout d'index.d.ts à l'exportation "./app.composant/app.composant". npm install génial-tapuscrit-loader. vs code peut résoudre importer {AppComponent} "~c"; (survolés par la souris affiche le chemin d'accès correct). ng build -> ERREUR dans C:/Temp/a4-cli-test/src/app/app.module.ts (4,30): Impossible de trouver le module '~c'. Ai-je raté quelque chose?
FWIW, je ne pouvais pas obtenir que cela fonctionne seulement lors de l'utilisation de la TsConfigPathsPlugin comme l'a documenté génial-tapuscrit-chargeur README, mais la synchronisation de la config comme ts-chargeur semblait fonctionner.
Cela a résolu mon problème: nous avons été à l'aide d'un module personnalisé de la syntaxe qui les alias définis à d'autres fichiers que index. Renommer les fichiers et la fixation de l'alias obtenu les chemins de travail. Merci!

OriginalL'auteur Daniel Rosenwasser
6

Mecs, il vous manque un point très important dans le tsconfig.json:
L'appariement de formes!

Il doit être configuré comme ceci:
```
"baseUrl": ".",
"paths": {
    "appSrc/*": [
        "src/*"
    ]
 }
```
Le "*" est le plus important à dire TS pour correspondre à quoi que ce soit sur le côté droit.

J'ai trouvé qu'à partir de cet article:
https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010

Ce doit être marqué comme réponse correcte. Mon IDE également nécessaire de ceci pour faire l'auto-complétion.
J'ai dû redémarrer VSCode une fois pour que la modification prenne effet.

OriginalL'auteur Caio Saldanha
2

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/')
        } 
    },
```
Ce doit être synchronisée avec votre tsconfig.json fichier (baseUrl et les chemins d'accès sont requis).
```
"compilerOptions":  {
    baseUrl: "./",
    ...
    paths: {
       "forms/*": ["src/forms/*]
    }
}
```
Remarque: Le modèle générique est nécessaire pour correspondre avec votre résoudre configuration de l'alias.

Ensuite, vous pouvez importer n'importe quelle bibliothèque à l'aide de votre pseudo:
```
import { FormsModule } from 'forms/my-forms/my-forms.module';
```
OriginalL'auteur pixelbits
1

J'ai dû faire un petit ajustement pour Caio Saldanha est la solution pour le faire fonctionner dans mon environnement.

Je suis à l'aide de Babel 7 avec babel-plugin-module-resolver à résoudre les alias. Pas de ts-loader ou awesome-typescript-loader comme Babel 7 prend en charge la Machine hors de la zone à l'aide @babel/preset-typescript. J'ai dû ajouter un chemin supplémentaire de configuration pour chaque alias pour charger le module racine (par exemple,index.ts) automatiquement:
```
"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 le .../index.ts ligne de cette importation ne fonctionne pas pour moi:
```
import { Logo } from 'component';  
```
Alias config 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',
        },
    },
],
```
OriginalL'auteur AMilassin
-2

Je pense vous pouvez le faire et de le faire travailler la façon dont vous décrivez:
```
resolve: {
    root: [
        path.resolve(__dirname),
        <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components')
    ], 
    extensions: ["", ".ts", ".tsx", ".js"]
},
```
Ensuite, vous pouvez faire import {Hello} from "Hello";

Je sais je faire pour résoudre les chemins de fichier dans mon src/js répertoire. Je ne suis pas à l'aide de la machine, mais je ne pense pas que cela aurait une incidence sur le résultat.

mais tapuscrit est le problème ici

OriginalL'auteur Dimitris Karagiannis

Vous devez vous connecter pour publier un commentaire.