typescript配置alias的详细步骤

1 安装依赖

npm install --save-dev babel-plugin-module-resolver
# yarn add babel-plugin-module-resolver --dev

根目录新增.babelrc文件

参考以下内容按您项目中的需要去修改

{
 "presets": ["next/babel"],
 "plugins": [
  [
   "module-resolver",
   {
    "alias": {
     "@/actions": "./actions",
     "@/components": "./components",
     "@/constants": "./constants",
     "@/pages": "./pages",
     "@/public": "./public",
     "@/reducers": "./reducers",
     "@/utils": "./utils"
    }
   }
  ]
 ]
}

修改tsconfig.json文件

{
 "compilerOptions": {
  "baseUrl": "./",
  "paths": {
   "@components/*": ["./components/*"],
   "@pages/*": ["./pages/*"],
   "@public/*": ["./public/*"]
  }
 }
}

注意"baseUrl": "./",不能省去，否则ts报Option 'paths' cannot be used without specifying '--baseUrl' option.错误

next.js中配置alias也可以参考如上步骤

到此这篇关于typescript配置alias的详细步骤的文章就介绍到这了,更多相关typescript配置alias内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue2 Vue-cli中使用Typescript的配置详解

    前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

  • React+TypeScript+webpack4多入口配置详解

    资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category

  • 浅谈TypeScript 用 Webpack/ts-node 运行的配置记录

    公司项目代码是用 TypeScript 写的, 中间遇到有些代码不要放到 Node 里面去跑. 具体场景一些路由配置, 比较大的一块 JSON 数据定义在 TypeScript 里. 我另外有增加脚本, 基于这些 JSON 数据用来生成切换路由的函数. 这就需要运行 TypeScript 了, 而且可能包含一些额外的业务代码. 首先 Node 运行 TypeScript 有提供 ts-node 用来处理. ts-node 会先编译 TypeScript 代码到 JavaScript, 再调用 N

  • vue与TypeScript集成配置最简教程(推荐)

    vue与TypeScript集成配置最简教程(推荐)

    前言 Vue的官方文档没有给出与TypeScript集成的具体步骤,网上其他的教程不是存在问题就是与vue-cli建立的项目存在差异,让人无从下手. 下面我就给出vue-cli建立的项目与TypeScript集成的最简配置. 初始化项目 首先用vue-cli建立webpack项目.这里为了演示方便,没有打开router和eslint等,可以根据自身情况打开. # vue init webpack vue-typescript ? Project name vue-typescript ? Pro

  • 详解使用Typescript开发node.js项目（简单的环境配置）

    详解使用Typescript开发node.js项目（简单的环境配置）

    最近在学习typescript的过程中,想到也许可以使用ts来开发node.js项目.在网上搜了一下,其实已经有很多开发者实践了这方面的内容.这里,我记录一下自己搭建开发环境的简单过程. 使用Typescript开发的好处: 较严格的类型检查和语法检查. 对ES6/ES2015/ES7(部分)支持比较好. 编译后的js文件很干净,也支持多种代码规范. 其他,请参见文档. 准备 node.js v6.9.1 或者任意的新版本,老版本暂时没有试验. tsc typescript编译器,使用npm安装

  • typescript配置alias的详细步骤

    1 安装依赖 npm install --save-dev babel-plugin-module-resolver # yarn add babel-plugin-module-resolver --dev 根目录新增.babelrc文件 参考以下内容按您项目中的需要去修改 { "presets": ["next/babel"], "plugins": [ [ "module-resolver", { "alias

  • Java配置DBeaver的详细步骤

    Java配置DBeaver的详细步骤

    DBeaver简介: 无意中得知DBeaver这个工具,觉得特别神奇,对我们目前工作特别有用,所以特别惊喜.(有点土包子没见过世面...) 借用百度百科:DBeaver是一个通用的数据库管理工具和 SQL 客户端,支持 MySQL, PostgreSQL, Oracle, DB2, MSSQL, Sybase, Mimer, HSQLDB, Derby, 以及其他兼容 JDBC 的数据库.DBeaver 提供一个图形界面用来查看数据库结构.执行SQL查询和脚本,浏览和导出数据,处理BLOB/CL

  • eclipse配置tomcat10的详细步骤总结

    eclipse配置tomcat10的详细步骤总结

    eclipse配置tomcat tomcat资源下载 如果打开没有servers请查看这篇文章:eclipse创建项目没有dynamic web 如果如上图一样没有apache tomcat,参考以下步骤.否则跳至restart步骤后 输入自己的版本号,版本号查看:Help/About Eclipse IDE 打开 Web, XML, Java EE and OSGi Enterprise Development next 这里看下载进度,之后restart 创建一个Servlet项目,来测试你

  • linux手工配置ip地址详细步骤

    linux手工配置ip地址详细步骤

    目录 1.先进入网卡配置目录 2.编辑ifcfg-ens33网卡的配置文件 3.刷新网络服务 4.测试ping百度能否上网 1.先进入网卡配置目录 2.编辑ifcfg-ens33网卡的配置文件       vim ifcfg-ens33如下: 修改之后如下: 退出保存,使用ip add查看自己的ip地址,ip route查看网关,然后再继续编辑ifcfg-ens33网卡的配置文件   退出并且保存(wq) 解析如下:  BOOTPROTO=none   #设置网卡静态配置ip地址  none 静

  • SpringBoot自动配置实现的详细步骤

    SpringBoot自动配置实现的详细步骤

    目录 springboot如何实现 一.依赖管理特性 1. 父项目 2. 场景启动器 二.自动配置 1. 自动配置组件 2. 默认的包结构 3. 各种配置拥有默认值 4. 按需加载所有自动配置项 三.小结 springboot如何实现 在之前的 helloworld 示例中,已经初步体会到 springboot 自动导入依赖.完成配置的爽快了. 那么,springboot 是如何实现的呢? 一.依赖管理特性 先看下上一篇内容示例中的pom.xml: <!--导入父工程--> <paren

  • Spring Cloud 整合 nacos实现动态配置中心的详细步骤

    Spring Cloud 整合 nacos实现动态配置中心的详细步骤

    目录 前提条件 整合步骤 1. 添加依赖 2. 新建 nacos 配置 3. bootstrap.properties 配置 4. 配置dataId 4.1 自动配置 dataId 4.2 手动设置 dataId 5.获取数据 总结 源码 参考文献 上一篇文章讲解了Spring Cloud 整合 nacos 实现服务注册与发现,nacos除了有服务注册与发现的功能,还有提供动态配置服务的功能.本文主要讲解Spring Cloud 整合nacos实现动态配置服务.主要参考官方部署手册点我. 前提条

  • 配置Domino服务器详细步骤分享

    1.配置新的服务器(包括(1)独立的服务器安装(2)附加服务器安装) (1)独立的服务器安装 第一步:点击Lotus Domino,显示Domino服务器设置窗口 第二步:选择第一个Domino服务器,点击下一步 第三步:一般选择高级配置,点击下一步 第四步:选择你所需要的服务,一般HTTP都要点中, 里面的参数说明如下: 标准服务:这是缺省项,即系统一定需要设置的,不能取消,其中包括:管理进程.索引服务.复制器.代理管理器.邮件路由器. 附加服务:日历管理器.事件管理器.日程安排管理器.统计信

  • Windows Server 2016服务器IIS配置的详细步骤(图文)

    Windows Server 2016服务器IIS配置的详细步骤(图文)

    本文主要记录 Windows Server 2016 环境下,安装配置 IIS 的详细步骤.需要说明的是,在选择“功能”或“角色服务”时不建议将所有的都勾选上,因为这样会添加很多不必要的功能和服务,占用服务器的磁盘空间和运行速度,应该是根据自己需要进行选择配置. 多余的话就不说了,配置Windows Server 2016服务器具体如下图 到此就配置完了,打开本地网址127.0.0.1即可. 到此这篇关于Windows Server 2016服务器IIS配置的详细步骤(图文)的文章就介绍到这了,

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • vue中使用typescript配置步骤

    vue中使用typescript配置步骤

    目录 1.vue老项目引入TypeScripe 从零开始创建vue+typescript项目 通过前端各个框架的发展,例如vue3.0,react和angular等框架的源码都是用ts(typescript)进行编写的,因此我感觉未来的中大型项目的发展趋势也离不开ts.因此我根据一些入门教程利用vue结合ts编写了文档,适合入门配置vue+ts项目. 1.vue老项目引入TypeScripe npm install vue-class-component vue-property-decorat

随机推荐