- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试从 Create React App 迁移到 Vite.js,但我遇到了导入别名的问题。
在 Create React App 中,我有一个 jsconfig.json
文件,其中 compilerOptions.baseUrl
设置为 src
,所以如果我 import Comp from 'components/MyComponent
它会自动转换为指向 src/components/MyComponent
的相对导入。
我不明白如何使用 Vite.js 和 esbuild 实现同样的效果?
最佳答案
根据评论,使用 vite
的配置选项 root
和设置别名 不是一个选项。
这里提出的解决方案是建立动态别名。
假设文件夹层次结构如下:
root_project
│ README.md
│ package.json
│
└───resources
│ │ index.html
│ | app.js
│ |___components
| | |
| | |___ HelloWorld.svelte
| |
│ │___assets
| | |
| | |___css
| | | |
| | | |___app.scss
| | |
| |___config
| | |
| | |___index.ts
│ |
└───node_modules
在 vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
import { readdirSync } from 'fs'
const absolutePathAliases: { [key: string]: string } = {};
// Root resources folder
const srcPath = path.resolve('./resources/');
// Ajust the regex here to include .vue, .js, .jsx, etc.. files from the resources/ folder
const srcRootContent = readdirSync(srcPath, { withFileTypes: true }).map((dirent) => dirent.name.replace(/(\.ts){1}(x?)/, ''));
srcRootContent.forEach((directory) => {
absolutePathAliases[directory] = path.join(srcPath, directory);
});
export default defineConfig({
root: 'resources',
resolve: {
alias: {
...absolutePathAliases
}
},
build: {
rollupOptions: {
input: '/main.ts'
}
}
});
现在,您可以在不更改导入指令的情况下包含一个组件:
import HelloWorld from 'components/HelloWorld.svelte'
您还可以直接从 resources
文件夹中包含文件:
import { foo } from 'config'
同样适用于 resources
或全局库下的 Assets 和其他文件:
import path from 'path' // <--- global
import { foo } from 'config' // <--- resources
import logoUrl from 'assets/logo.png' // <--- resources
那里有更多信息:vite official doc
关于vite - 在 Vite.js 项目中使用 `compilerOptions.baseUrl`?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69424422/
抱歉,如果这是一个 nobb 问题,但我正在构建一个 Angular 应用程序并且我当前的 tsconfig.json 文件将“es6”作为“compilerOptions”中的“目标”: { "
我正在尝试映射 tsconfig.json 中的路径以摆脱 相对路径 hell 。我的 React App 基于 Create-React-App . 我试过这个 SO thread并在我的 tsco
我正在尝试通过查看这个问题 Visual Studio Code: compile typescript module 来配置 vscode 来编译 typescript 和这篇文章 https://
我正在开发一个 TypeScript 项目,我们使用 ES2017 作为输出目标,以及其中一个库,因为它将通过 Babel,我们希望支持最新的功能集我们在 Babel 中定位“Env”。 一切似乎都很
我对非 ts 模块(文本 Assets )有一个问题,它们没有按照 tsconfig.json 中的配置转移到 outDir(或者我做得不对)。 这是最简单的复制案例 // /src/main.ts
我正在使用 TypeScript 编译器 API。初始化程序时,系统要求我提供一个 CompilerOptions 对象。我想对给定的 tsconfig.json 文件使用 CompilerOptio
我正在尝试从 Create React App 迁移到 Vite.js,但我遇到了导入别名的问题。 在 Create React App 中,我有一个 jsconfig.json 文件,其中 comp
我正在尝试将我的 Angular4 应用程序更新到 Angular5。 我尝试按照官方网站建议的步骤进行操作,但现在我无法再编译,并且出现此错误: 错误 TS5023:未知的编译器选项“compile
从 2016 年中期开始,几乎所有 Angular2 TypeScript 教程和示例都在 tsconfig 的 compilerOptions 部分中使用 "target": "es5" .json
我正在尝试通过设置相应的字段来配置 Google Closure Compiler 的 CompilerOptions。但是,当我在简单模式下调用 setRemoveDeadCode() 方法激活死代
我对 tsconfig.json 中的 compilerOptions->lib 属性有疑问。 情况是我正在开发一个用 TypeScript 编写的 Firebase Cloud Functions
我正在使用 asp.net 3.5 在 web.config 中,我有 debug=false 和 compilerOptions="/debug:pdbonly"以进行优化编译,并且仍然在我的堆栈跟
我正在 Laravel 项目中开发 VueJS 3,我正在使用一个 JS 文件,该文件为我提供了用于 Markdown 工具栏的元素。基本上,它是一组功能,为我提供了应用所选 Markdown 选项的
**Trying to set the path inside tsconfig.json for compiler to treat src as baseUrl in react typescri
这个问题让我在使用 Vue 2 和 Vue CLI 时的几个方面感到困惑,现在又开始了一个新的 Vue 3.0 beta 项目。 Even with the currently newest Vue
更新到 Android Studio 2.3 后,尝试构建项目导致构建失败。 Execution failed for task ':app:greendao'. org.eclipse.jdt.in
我一直在使用 Svelte、TypeScript 和 Rollup(让 TypeScript 处理转译)来定位 ES7。现在我正在开始一个新项目,需要以 ES5 为目标。 我注意到的第一件事是一切都被
当我将 ASP.NET Web 应用程序部署到生产环境时,我使用配置转换来删除 debug="true"来自 .但是,就在今天,我注意到 web.config 中的另一个部分如下所示:
我是一名优秀的程序员,十分优秀!