Storybook使用tsconfig中的别名配置

最新推荐文章于 2024-08-22 09:11:00 发布
最新推荐文章于 2024-08-22 09:11:00 发布
阅读量485 收藏
点赞数
分类专栏： 个人探究 文章标签： 前端 javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37964621/article/details/128551086
版权
本文介绍了如何解决在Storybook中别名配置失效的问题。通过添加特定插件并进行配置，使得tsconfig中的别名能在Storybook框架下正常工作。
摘要由CSDN通过智能技术生成

问题描述

配置在tsconfig.json中的别名系统在storybook框架下无法生效

解决方法

添加插件tsconfig-paths-webpack-plugin到storybook的运行时框架中。

实施

安装插件

npm install -D tsconfig-paths-webpack-plugin

配置插件

配置路径.storybook/main.js.

const TsconfigPathsWebpackPlugin = require('tsconfig-paths-webpack-plugin')

module.exports =
最低0.47元/天 解锁文章
lipo8081
关注
专栏目录
storybook-html：完整配置HTML故事书
02-06
故事书HTML 该存储库演示了如何将用于HTML和CSS / SCSS。 您可以将此存储库用作模板。 入门 使用npm install安装依赖项。 使用npm run storybook运行Storybook。 测验 该存储库使用 ， 和验证您HTML，CSS / SCSS和JS代码。 您可以调用npm run test和/或安装编辑器扩展。 VSCode扩展
storybook-stencil-example：使用Storybook中的Stencil组件的示例项目
02-04
这是一个用于使用和构建Web组件库的入门项目。 入门 要开始将此仓库克隆到新目录中，并运行以下命令： npm install npm start 有关如何从头开始重新创建此主题的分步教程，可以按照以下系列博客文章进行操作： ...
关于src别名的配置之tsconfig.json配置
m0_67992720的博客
11-28 1438
baseUrl./../基地址baseUrl./baseUrl的值是相对于文件所在的目录的路径。在这个配置中，"./"表示基础路径是当前文件所在的目录。解析非相对模块：当 TypeScript 编译器遇到import或require语句引用一个非相对路径的模块时，它会使用baseUrl作为起点，拼接上模块的相对路径，以解析最终的文件路径。
推荐使用 tsconfig-paths-webpack-plugin：简化你的 TypeScript 项目构建
最新发布
gitblog_00829的博客
08-22 908
推荐使用 tsconfig-paths-webpack-plugin：简化你的 TypeScript 项目构建 tsconfig-paths-webpack-pluginLoad modules according to tsconfig paths in webpack.项目地址:https://gitcode.com/gh_mirrors/ts/tsconfig-paths-webpack-...
TS+TypeScript设置路径别名
myself_own的博客
02-20 216
ts+typescript设置路径别名
在不同 webpack 版本的 Vue 项目中配置 Storybook
tonylua的博客
04-20 749
在之前的一篇文章中，介绍过组件化搭建工具 storybook 在 vue 项目中的安装和配置。相比于其成文的时间，vue 项目依赖的工具多有发展；并且在实际应用中，多种历史版本的项目并存的...
vite+ts配置tsconfig.json路径别名仍不生效的问题
qq_57319760的博客
12-01 1737
最近在用vite从头配置项目的时候发现了配置别名不生效的问题，于是开始在全文搜索相关资料。发现没有一篇资料回答到了终点，似乎都在说配置tsconfig的baseUrl和paths后就万事大吉了。于是我浪费了两个小时，开始到处找资料，并没有什么用，开始翻以前写的代码，对比tsconfig后发现了个问题，最近用vite创建的项目它的tsconfig里面的moduleResolution默认的是最新ts5.0的bundler，然而这样会导致vscode识别不出来路径别名。
material-storybook：使用Storybook的Material演示
02-03
《使用Storybook的Material演示——material-storybook深度解析》 在现代前端开发中，组件化设计已经成为提升效率、保持代码可维护性的重要手段。而为了更好地管理和展示这些组件，开发者们常常会借助像Storybook...
killer-storybook-config：一个杀手级的Storybook Webpack配置，可帮助您尽快引导出色的Storybook配置。 它包括一个React Frontend，针对Storybook，TypeScript，Babel和ESlint的GraphQL兼容性
02-03
:fire: 杀手故事书配置 :fire: 故事书（v5），Webpack，React，Typescript，SCSS，ESLint和GraphQL 安装 克隆仓库 运行npm i 运行npm run storybook 运行React npm run start 文章链接
react + ts路径别名配置不生效
weixin_44146121的博客
12-21 2420
react-app-rewired使用 create-creact-app项目，如果需要手动修改配置，需先npm run eject弹出配置，这个过程是不可逆的。 这里介绍使用react-app-rewired。它的作用是用来帮助你重写react脚手架配置。
配置@路径别名
HQ\(^o^)/的博客
07-21 744
在v3+ts的项目中,vscord不认识@符号因为为了让vscode认识@符号并提出提示。
tsconfig-paths-webpack-plugin:根据Webpack中的tsconfig路径加载模块
05-05
tsconfig-paths-webpack-plugin 使用tsconfig.json时，可使用此选项加载其位置在tsconfig.json的paths部分中指定的模块。 该软件包提供软件包的功能，但作为Webpack插件。 使用这个插件意味着你将不再需要添加alias在条目webpack.config.js对应的paths在条目tsconfig.json 。 该插件为您创建了这些alias条目，因此您不必这样做！ 如何安装 注意：如果使用的是webpack 4，则需要使用版本> = 3.0.0（与webpack 3向下兼容）。 yarn add --dev tsconfig-paths-webpack-plugin 或者 npm install --save-dev tsconfig-paths-webpack-plugin 如何使用 在您的webpack配置中添加以下内容：
React+TypeScript项目：配置路径别名
听海边涛声
08-06 255
React+TypeScript项目：配置路径别名
Typescript的tsconfig.json配置及相关原理
YunWisdom
07-10 4262
tsconfig.json是TypeScript项目中的配置文件，用于指定编译器的行为和项目的编译选项。通过修改tsconfig.json文件，我们可以对TypeScript编译器进行自定义设置，以满足项目的需求。：这是一个非常重要的部分，用于配置编译器选项。你可以在这里设置目标JavaScript版本、模块解析方式、输出目录、严格模式等。"include"和"exclude"：这两个选项用于指定需要编译的文件或文件夹。"include"指定需要包含的文件或文件夹，而"exclude"
React+ts+less+storybook的组件项目相关配置及其内容
iYNing的博客
08-14 395
关于react+ts+less+storybook组件项目的配置及其相关内容。
tsconfig.json中设置“paths“: { “@/*“: [“src/*“] }不生效问题
weixin_70394181的博客
07-06 741
在写项目时配置别名时，在tsconfig.json配置路径提示不生效。配置文件,找到配置项 compilerOptions 添加配置,这是在tsconfig.json的配置，配置并不生效。在vite.config.ts中配置了别名。找到tsconfig.app.json。
typescript 路径别名问题（别名设置 & 开发与打包时路径问题）
问白的博客
02-13 3944
ts别名问题
推荐一个强大的Webpack插件：tsconfig-paths-webpack-plugin
gitblog_00029的博客
04-15 552
推荐一个强大的Webpack插件：tsconfig-paths-webpack-plugin tsconfig-paths-webpack-pluginLoad modules according to tsconfig paths in webpack.项目地址:https://gitcode.com/gh_mirrors/ts/tsconfig-paths-webpack-plugin 在前...
Vue3 设置文件别名【vue-cli、tsconfig.json】
qq_22841387的博客
03-15 4000
配置路径别名是提高代码可读性和可维护性的有效方法。通过使用路径别名，可以避免长路径引发的混乱，并使代码更加简洁和易于管理。保持一致性和中的别名配置需要一致。测试配置：在实际开发中测试别名配置，确保其能够正确解析路径。文档记录：在项目文档中记录路径别名配置，便于团队成员了解和使用。通过以上步骤，您可以在 Vue 3 + TypeScript 项目中有效地配置和使用路径别名，从而提升开发效率和代码质量。
storybook使用
07-27
Storybook是一个响应式UI开发和测试环境，可以用于可视化开发和调试React和Vue组件。它是一个开源工具，可以帮助开发人员在隔离环境中构建UI组件和页面，简化UI开发、测试和文档编写的过程。你可以在官方网站https://github.com/storybooks/storybook上找到更多关于Storybook的信息。安装Storybook可以参考官方文档中的指南。在Storybook中，通过默认导出的元数据来控制如何列出你的故事(stories)并提供插件使用的信息。例如，一个故事文件Component.stories.js的默认导出如下所示：\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [ storybook的介绍和使用 比较火的响应式UI开发及测试环境 ...](https://blog.csdn.net/weixin_34226706/article/details/89549555)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [storybook 使用 （react-create-app ts篇）](https://blog.csdn.net/weixin_43480867/article/details/125246011)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值