Блог

Используя Svelte и typescript, я хотел бы использовать пути для импорта компонентов.

У меня есть следующее 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/*"]
    }
  }
}
  

Теперь, когда я делаю

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

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

<main>
  <Home/>
</main>

  

Домашняя ссылка на какой-нибудь изящный внутренний файл =>

вместо моего Home.svelte

Это работает, если я это сделаю import Home from './home/Home.svelte' Я не могу понять, почему.

Шаблон svelte использует rollupjs в качестве пакета. Он используется для рекурсивного анализа всех ваших файлов и переноса (компиляции для Svelte) в один .js файл, понятный каждому браузеру.

Итак, когда вы хотите использовать псевдонимы в своем import , вам нужно сообщить составителю пакета, как с этим обращаться. Для этого вам нужно в rollup.config.js файле объявить все псевдонимы, как вы делаете в tsconfig.json .

Чтобы объявить их, вам нужно будет установить внешний пакет с именем @rollup / plugin-alias и использовать его подобным образом в 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')
                }
            ]
        }),
        ...
    ],
};
  

Теперь rollupjs способен разрешать все пути, содержащие @src псевдоним.

Проверьте этот репозиторий для рабочего примера.

Я трачу много времени на решение этой проблемы. Много времени…

Единственный способ, которым я, наконец, заставил это работать, — это комбинация этих шагов:

1. Настройте пути в tsconfig, как вы это делали.
2. Установите @roplup-plugin-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 amp;amp; serve(),

        
        !production amp;amp; livereload('public'),

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

  

3. И последнее… ну, у меня это работает только с указанием расширения.

Это работает: import something from "@app/module.ts";

Этот не: import something from "@app/module";

Я надеюсь, что это поможет и в вашем случае.