typescript - Configurare cale tsconfig în svelte

Folosind Svelte și TypeScript, aș dori să folosesc căi pentru importul componentelor.

Am următorul tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "main": "src/main.ts",
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "baseUrl": "./",
    "module": "es2020",
    "target": "es2020",
    "paths": {
      "@src/*": ["src/*"],
      "@environments/*": ["src/environments/*"]
    }
  }
}

Acum când fac

<script lang="ts">
  import Home from '@src/home/Home.svelte'
</script>

<style>
  main {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>

<main>
  <Home/>
</main>

Punctul de acasă către un fișier intern subțire =>

în loc de Home.svelte al meu

Funcționează dacă fac import Home from './home/Home.svelte' Nu pot să înțeleg de ce.

Răspuns #1

Șablonul Svelte folosește rollupjs ca bundler. Este utilizat pentru a analiza recursiv toate fișierele tale și a transpila (compila pentru Svelte) într-un singur fișier .js pe care orice browser îl poate înțelege.

Așadar, când vrei să folosești aliasuri în import, trebuie să-i spui bundler-ului cum să le gestioneze. Pentru asta, în fișierul rollup.config.js trebuie să declari toate aliasurile așa cum faci în tsconfig.json.

Pentru a le declara, va trebui să instalați un pachet extern numit @rollup/plugin-alias și să îl folosiți astfel în rollup.config.js:

import alias from '@rollup/plugin-alias';
import path from 'path'

const projectRootDir = path.resolve(__dirname);


export default {
    ...
    plugins: [
        ...
        alias({
            entries: [
                { 
                    find: '@src',
                    replacement: path.resolve(projectRootDir, 'src')
                }
            ]
        }),
        ...
    ],
};

Acum rollupjs este capabil să rezolve toate căile care conțin aliasul @src.

Verifică acest depozit pentru un exemplu funcțional.

Răspunsul #2

Petrec mult timp pentru a rezolva această problemă. Mult timp...

Singura modalitate prin care am reușit în cele din urmă să funcționeze este o combinație a acestor pași:

1. Configurează căile în tsconfig așa cum ai făcut.
2. Instalează @ropllup-plugin-alias astfel (partea importantă este secțiunea plugins -> alias:

import resolve from '@rollup/plugin-node-resolve';
import alias from "@rollup/plugin-alias";
import svelte from 'rollup-plugin-svelte';

import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

import path from "path";

const projectRootDir = path.resolve(__dirname);

const production = !process.env.ROLLUP_WATCH;


export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
    svelte({
            // enable run-time checks when not in production
      dev: !production,
      extensions: [ ".svelte" ],
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write('public/build/bundle.css');
            },
            preprocess: sveltePreprocess(),
    }),

    alias({
      entries: [
        { find: "@src", replacement: path.resolve(projectRootDir, 'src') },
        { find: "@layout", replacement: path.resolve(projectRootDir, 'src/layout') },
        { find: "@public", replacement: path.resolve(projectRootDir, 'public') },
        { find: "@app", replacement: path.resolve(projectRootDir, 'src/app') },
        { find: "@components", replacement: path.resolve(projectRootDir, 'src/components') },
        { find: "@util", replacement: path.resolve(projectRootDir, 'src/util') },
        { find: "@stores", replacement: path.resolve(projectRootDir, 'src/stores') }
      ]
    }),

        resolve({
            browser: true,
            dedupe: ['svelte']
    }),
    
    commonjs(),

    typescript({ sourceMap: !production }), 

        
        !production && serve(),

        
        !production && livereload('public'),

        
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

3. Și ultimul este... ei bine, funcționează pentru mine doar dacă specific extensia.

Acesta funcționează: import something from "@app/module.ts";

Acesta nu funcționează: import something from "@app/module";

Sper că te ajută și în cazul tău.