svelte中设置tsconfig路径

问题描述

使用svelte和打字稿，我想使用路径进行组件导入。

我有以下python -m pip install scipy/numpy

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就行了我不知道为什么。

解决方法

苗条的模板使用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别名的所有路径。

查看this repo以获取有效示例。

我花了很多时间来解决这个问题。很多时间...

我最终使之生效的唯一方法是结合以下步骤：

像以前一样在tsconfig中设置路径。
像这样安装@ ropllup-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",'src') },{ find: "@layout",'src/layout') },{ find: "@public",'public') },{ find: "@app",'src/app') },{ find: "@components",'src/components') },{ find: "@util",'src/util') },{ find: "@stores",'src/stores') }
      ]
    }),resolve({
            browser: true,dedupe: ['svelte']
    }),commonjs(),typescript({ sourceMap: !production }),!production && serve(),!production && livereload('public'),production && terser()
    ],watch: {
        clearScreen: false
    }
};

最后一个是...很好，它仅对扩展名有效。

此作品有效：import something from "@app/module.ts";

这不是：import something from "@app/module";

我希望它对您的情况也有帮助。

svelte typescript typescript