痛点

如果我们有这个目录:

├── webpack.config.js
├── src
│ ├── view
│ │ ├── index.js
│ │── router
│ │ ├── index.js

不使用任何方式的路径别名的话,在/view/index.js内要引入/router/index.js的话,就要使用../router。当目录结构变深的时候就会出现../../../../../,这是一个噩梦。

所以我们的目标是用@view指代/src/view目录,@router指代/src/router目录,

@src指代/src目录。@alias只是形式上表示这是一个别名,@并不是必需的,可以用$,%,^,甚至不使用,直接src指代/src

在JavaScript中的解决方案

构建工具的alias

在构建工具Webpack中可以使用 resolve.alias 属性定义。

resolve:{
alias: {
'@view': path.resolve(__dirname, 'src/view'),
'@router': path.resolve(__dirname, 'src/router')
}
}

这时在/view/index.js中就可以使用@router[/index.js]来引入/router/index.js了。

使用Webpack的alias属性推荐(必需)使用绝对路径,因为Webpack采用的使用时匹配替换形式的。就是说如果alias.@router 设为 ../router 的话,在使用2router引入的时候会被替换成../router,虽然在/view/index.js中能正常工作,但是在/view/user/index.js中就找不到文件了。所以坚决建议使用绝对路径。

重写require

重写require方法,如:sexy-require,在require的时候用自定义的路径替换,这个一般会在Node.js中使用。下面是一个简单实现:

const alias = {
'@view' : path.resolve(__dirname, 'src/view'),
'@router': path.resolve(__dirname, 'src/router')
}
const _require = Module.prototype.require;
Module.prototype.require = function(path) {
for (let ali in alias) {
path = path.replace(ali, alias[ali]);
}
return _require.call(this, path)
}

当然这种方法只能用在require方式引入文件,ES Module是用不了的。

在TypeScript中的解决方案

在TypeScript中需要在编译前配置路径映射的baseUrl和paths,用于告诉编译器到哪里去查找模块。但是编译过程中并不会将路径替换成目标路径,就是.ts文件中的@router在生成的.js文件中仍然是@router。这就要我们编译后的文件再设置一次路径别名了。如果用Webpack打包的当然可以使用构建工具的alias完成别名。如果没有用Webpack的也可以重写require方法,这里记得要将tsconfig.json里面"module"设为"commonjs",因为我们只能重写require方法。

注意:如果.ts文件存放在src目录,编译后.js文件存放在dist目录,记得.ts文件中的路径映射是要用以src目录为基础的,而对.js文件得路径别名要以dist目录为基础

// tsconfig.json
// baseUrl 是源代码目录
{
"compilerOptions": {
"target": "ES2017",
"module": "commonjs",
"outDir": "dist",
"baseUrl": "src",
"paths": {
"$*": ["*"]
}
},
"include": ["src/**/*"],
"exclude": ["dist"]
}
// package.json
// path.$* 的路径都是以tsconfig.json 中 outDir 为基础的
{
"name": "alias",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./dist/router"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^8.0.47",
"sexy-require": "^0.1.0"
},
"path": {
"$router": "/dist/router",
"$view": "/dist/view"
}
}
// src/router/index.ts
require("sexy-require"); const view = require("$view"); console.log(view); export = "router/index";
// src/view/index.ts
export = "view/index";

../../../../.. 太low了的更多相关文章

  1. 女朋友看了我的博客,说太LOW了,于是我搞了一天~

    持续原创输出,点击上方蓝字关注我 原创博客+1,点击左下角阅读原文进入 目录 前言 如何下载? 配置文件的分类 基本信息配置 修改主题 Next主题样式设置 添加动态背景 修改链接的样式 添加文章搜索 ...

  2. 前端嫌弃原生Swagger界面太low,于是我给她开通了超级VIP

    缘由 接口文档想必是许多开发小伙伴的噩梦,不仅要写详细,还要及时维护文档与后端代码保持一致,稍有没及时更新接口文档,前端同学肯定会抱怨后端同学给的文档与实际情况不一致. 于是,引入了Swagger组件 ...

  3. java太low,又舍不得jvm平台的丰富资源?试试kotlin吧(一)

    尝试kotlin的起因 因为各种原因(版权,人员招聘),公司的技术体系从c#转到了java,我花了大概两周的时间来上手java,发现java的语法还是非常简单的,基本看着代码就知道什么意思.学习jav ...

  4. 程序员还在用360,腾讯电脑管家清理注册表,清理垃圾?只能说你太low

    首先明明电脑上,就有清理垃圾和无用注册表的功能,只是我么缺少发现美的眼睛. 为什么不用360,腾讯全家桶. 那玩意固然香,而且真香,但是后台占用率太高,作为一个有洁癖的我,实在是不想看到自己右下角多一 ...

  5. 你别告诉我你还在用Excel做数据透视分析吧,太low了!

    来到大数据分析的时代,大量的大数据分析软件涌现,尽管如此,如果今天有人问起最常用的数据透视分析工具是什么的时候,我猜想Excel应该是大家的不二之选. 但是其实我想说,用现在的手机来打比方,Excel ...

  6. 还在用逆向工程?太Low了,试试通用Mapper吧!

    什么是通用Mapper? 通用mapper 可以极大的方便开发人员进行ORM,提供极其方便的单表增删改查. 什么是通用mapper,一句话简单说,它就是个辅助mybatis极简单表开发的组件.它不是为 ...

  7. 【图文并茂】 做开发这么久了,还不会搭建服务器Maven私有仓库?这也太Low了吧

    大家好,我是冰河~~ 最近不少小伙伴想在自己公司的内网搭建一套Maven私服环境,可自己搭建的过程中,或多过少的总会出现一些问题,问我可不可以出一篇如何搭建Maven私服的文章.这不,就有了这篇文章嘛 ...

  8. 别再用 System.currentTimeMillis 统计耗时了,太 Low,试试 Spring Boot 源码在用的 StopWatch吧,够优雅!

    大家好,我是二哥呀! 昨天,一位球友问我能不能给他解释一下 @SpringBootApplication 注解是什么意思,还有 Spring Boot 的运行原理,于是我就带着他扒拉了一下这个注解的源 ...

  9. ASP.NET Core 之 Identity 入门(二)

    前言 在 上篇文章 中讲了关于 Identity 需要了解的单词以及相对应的几个知识点,并且知道了Identity处在整个登入流程中的位置,本篇主要是在 .NET 整个认证系统中比较重要的一个环节,就 ...

随机推荐

  1. Spring - BeanPostProcessor接口(后处理器)讲解

    概述: BeanPostProcessor接口是众多Spring提供给开发者的bean生命周期内自定义逻辑拓展接口中的一个,其他还有类似InitializingBean,DisposableBean, ...

  2. mysql数据库-注释相关介绍

    mysql执行的sql脚本中注释怎么写? mysql 服务器支持 # 到该行结束.-- 到该行结束 以及 /* 行中间或多个行 */ 的注释方格: mysql; # 这个注释直到该行结束 mysql; ...

  3. 二叉树终极教程--BinarySearchTree

    BinarySearchTreeMap 的 实现 public interface Map<K extends Comparable<K>, V> { void put(K k ...

  4. oracle 数据库(表)的逻辑备份与恢复

    一.介绍逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程.逻辑恢复是指当数据库对象被误操作而损坏后使用工具import利用备份的文件把数据对象导入到数据库的过程.物理备份即可在数 ...

  5. MySQL高级查询(一)

    修改表 修改表名 语法: ALTER  TABLE<旧表名> RENAME  [TO] <新表名>; 添加字段 语法: ALTER  TABLE 表名 ADD 字段名 数据类型 ...

  6. Linux 环境下java安装及配置

    操作系统环境: Red Hat Enterpriser  Linux 6.5 jdk版本:  jdk1.8.0_144 1 从官网下载Linux操作系统对应的jdk版本文件 2 安装jdk 3 安装完 ...

  7. Coin Change (IV) (dfs)

    Coin Change (IV) Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %lld & %llu [Subm ...

  8. yii2-swiftmailer入门

    1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...

  9. Python实战之用类的静态方法实现登录验证

    #!usr/bin/env Python3 # -*-coding:utf-8-*- __author__="William" #define a class,just to le ...

  10. 大概是:整数划分||DP||母函数||递推

    整数划分问题 整数划分是一个经典的问题. Input 每组输入是两个整数n和k.(1 <= n <= 50, 1 <= k <= n) Output 对于每组输入,请输出六行. ...