在 svelte 中设置 tsconfig 路径答案

【问题标题】：Setup tsconfig path in svelte在 svelte 中设置 tsconfig 路径
【发布时间】：2020-12-05 05:41:16
【问题描述】：

使用 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'就可以了我不知道为什么。

【问题讨论】：

您还需要为捆绑程序配置别名。你用哪个？网络包？包裹？
@johannchopin 我不知道，我使用的是 svelte 模板并执行了添加打字稿支持的命令
我无法重现此内容。我按照您的步骤重新启动了 Svelte 扩展程序（命令：“Svelte：重新启动语言服务器”），所以它知道我现在的 tsconfig.json 设置，然后它工作了。

标签： typescript svelte

【解决方案1】：

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 以获取工作示例。

【讨论】：

【解决方案2】：

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

我最终使它工作的唯一方法是结合以下步骤：

像你一样在 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", 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
    }
};

最后一个是...嗯，它只对我有效，只需要指定扩展名。

这个有效：import something from "@app/module.ts";

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

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

【讨论】：