Javascript 在typescript svelte中导入alias svelte组件

我想在typescript svelte组件中导入svelte组件，它适用于typescript文件和其他类型的文件，但在svelte组件的这种情况下，它会导致路径错误，以下是我的代码：

<script lang="ts">
    import LoadingIcon from "src/components/LoadingIcon.svelte";
</script>

下面是我的

rollup.config.js

：

从“汇总插件svelte”导入svelte；
从“@rollup/plugin node resolve”导入解析；
从“@rollup/plugin commonjs”导入commonjs；
从“@rollup/plugin-typescript”导入类型脚本；
从“@rollup/plugin replace”导入替换；
从“@rollup/plugin json”导入json；
从“汇总插件livereload”导入livereload；
从“汇总插件terser”导入{terser}；
从“svelte preprocess”导入sveltePreprocess；
从“汇总插件副本”导入副本；
从“汇总插件删除”导入del；
const buildDir=“public/build”；
const deploymentDir=“public”；
常数生产=！process.env.ROLLUP\u WATCH；
const dotenv=require（“dotenv流”）；
dotenv.config({
node_env:process.env.node_env，
默认节点环境：“开发”，
});
const fileDev=dotenv.listDotenvFiles（“/”{
节点_env：“开发”，
});
const fileProd=dotenv.listDotenvFiles（“/”{
节点_env:“生产”，
});
函数serve（）{
让服务器；
函数toExit（）{
if（server）server.kill（0）；
}
返回{
writeBundle（）{
如果（服务器）返回；
服务器=需要（“子进程”）。生成(
“npm”，
[“运行”、“启动”、“运行”、“开发”]，
{
stdio:[“忽略”、“继承”、“继承”]，
壳牌：是的，
}
);
过程。关于（“SIGTERM”，toExit）；
过程。关于（“退出”，toExit）；
},
};
}
常量baseUrl=
process.env.BASE_URL==“/”
? ""
：“/”+（process.env.BASE_URL | | |“）。替换（/^\/\/$/g，”）；
导出默认值[
{
输入：“src/main.ts”，
输出：{
sourcemap:true，
格式：“esm”，
名称：“应用程序”，
目录：`${buildDir}/`，
},
插件：[
del（{targets:`${deploymentDir}/*`，runOnce:true}），
抄袭({
目标：[
{src:“scripts/*”，dest:`${buildDir}/`}，
{
src:“src/index.html”，
目标：`${deploymentDir}/`，
转换：（内容）=>{
让content=contents.toString（）；
content=content.replace(
/（）/总经理，
基本URL
);
返回内容；
},
是的，
},
{
src：“src/assets/images/*”，
dest:`${deploymentDir}/images/`，
是的，
},
{
src：“src/assets/lang/*”，
dest:`${deploymentDir}/lang/`，
是的，
},
{
src：“src/assets/plugins/*”，
dest:`${deploymentDir}/plugins/`，
是的，
},
],
}),
json（），
替换({
“process.browser”：正确，
“process.env.NODE_env”：JSON.stringify(
生产？“生产”：“发展”
),
“process.env.BASE_URL”：JSON.stringify（process.env.BASE_URL），
“process.env.API_URL”：JSON.stringify（process.env.API_URL），
}),
苗条的({
戴夫：制作，
css：（css）=>{
write（`bundle.css`）；
},
预处理：苗条预处理({
邮政编码：{
configFilePath:“./postsss.config.js”，
},
打字稿：{
tsconfig文件：`./tsconfig.json`，
},
}),
}),
决心({
浏览器：是的，
重复数据消除：[“苗条”]，
扩展名：[“.mjs”、“.ts”、“.js”、“.json”、“.node”、“.svelte”]，
}),
commonjs（），
打字稿({
sourceMap:！生产，
在线资源：！生产，
}),
//在开发模式下，调用一次“npm run start”
//包已生成
！生产和服务（），
//查看“public”目录并刷新
//非生产状态下的更改浏览器
！production&livereload（部署目录），
//如果我们是为生产而构建（npm运行构建
//而不是npm运行开发），缩小
生产和精简（），
],
观察：{
屏幕：错误，
},
},
];

---

有人知道如何解决这个问题吗？感谢您的帮助

您正在使用

baseUrl

，这意味着代码中引入了某种路径别名

@rollup/plugin typescript

无法解决这些问题，因此您需要在之后执行额外的步骤。您可以使用

@rollup/plugin alias

进行此操作

更新的rollup.config.js：

// ... other imports
import alias from "@rollup/plugin-alias";

// ..
  plugins: [
    // ... after typescript({..})
    
    alias({
      entries: [
        // If you add a new top-level-folder besides src which you want to use, add it here
        { find: /^src(\/|$)/, replacement: `${__dirname}/src/` },
      ],
    }),

---

您使用的是

baseUrl

，这意味着代码中引入了某种路径别名

@rollup/plugin typescript

无法解决这些问题，因此您需要在之后执行额外的步骤。您可以使用

@rollup/plugin alias

进行此操作

更新的rollup.config.js：

// ... other imports
import alias from "@rollup/plugin-alias";

// ..
  plugins: [
    // ... after typescript({..})
    
    alias({
      entries: [
        // If you add a new top-level-folder besides src which you want to use, add it here
        { find: /^src(\/|$)/, replacement: `${__dirname}/src/` },
      ],
    }),

---

请发布您的

tsconfig.json

，因为该文件确定这样的导入是否有效。另外，你用什么捆绑？汇总/网页包？