../../../../.. 太low了
痛点
如果我们有这个目录:
├── 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了的更多相关文章
- 女朋友看了我的博客,说太LOW了,于是我搞了一天~
持续原创输出,点击上方蓝字关注我 原创博客+1,点击左下角阅读原文进入 目录 前言 如何下载? 配置文件的分类 基本信息配置 修改主题 Next主题样式设置 添加动态背景 修改链接的样式 添加文章搜索 ...
- 前端嫌弃原生Swagger界面太low,于是我给她开通了超级VIP
缘由 接口文档想必是许多开发小伙伴的噩梦,不仅要写详细,还要及时维护文档与后端代码保持一致,稍有没及时更新接口文档,前端同学肯定会抱怨后端同学给的文档与实际情况不一致. 于是,引入了Swagger组件 ...
- java太low,又舍不得jvm平台的丰富资源?试试kotlin吧(一)
尝试kotlin的起因 因为各种原因(版权,人员招聘),公司的技术体系从c#转到了java,我花了大概两周的时间来上手java,发现java的语法还是非常简单的,基本看着代码就知道什么意思.学习jav ...
- 程序员还在用360,腾讯电脑管家清理注册表,清理垃圾?只能说你太low
首先明明电脑上,就有清理垃圾和无用注册表的功能,只是我么缺少发现美的眼睛. 为什么不用360,腾讯全家桶. 那玩意固然香,而且真香,但是后台占用率太高,作为一个有洁癖的我,实在是不想看到自己右下角多一 ...
- 你别告诉我你还在用Excel做数据透视分析吧,太low了!
来到大数据分析的时代,大量的大数据分析软件涌现,尽管如此,如果今天有人问起最常用的数据透视分析工具是什么的时候,我猜想Excel应该是大家的不二之选. 但是其实我想说,用现在的手机来打比方,Excel ...
- 还在用逆向工程?太Low了,试试通用Mapper吧!
什么是通用Mapper? 通用mapper 可以极大的方便开发人员进行ORM,提供极其方便的单表增删改查. 什么是通用mapper,一句话简单说,它就是个辅助mybatis极简单表开发的组件.它不是为 ...
- 【图文并茂】 做开发这么久了,还不会搭建服务器Maven私有仓库?这也太Low了吧
大家好,我是冰河~~ 最近不少小伙伴想在自己公司的内网搭建一套Maven私服环境,可自己搭建的过程中,或多过少的总会出现一些问题,问我可不可以出一篇如何搭建Maven私服的文章.这不,就有了这篇文章嘛 ...
- 别再用 System.currentTimeMillis 统计耗时了,太 Low,试试 Spring Boot 源码在用的 StopWatch吧,够优雅!
大家好,我是二哥呀! 昨天,一位球友问我能不能给他解释一下 @SpringBootApplication 注解是什么意思,还有 Spring Boot 的运行原理,于是我就带着他扒拉了一下这个注解的源 ...
- ASP.NET Core 之 Identity 入门(二)
前言 在 上篇文章 中讲了关于 Identity 需要了解的单词以及相对应的几个知识点,并且知道了Identity处在整个登入流程中的位置,本篇主要是在 .NET 整个认证系统中比较重要的一个环节,就 ...
随机推荐
- Spring - BeanPostProcessor接口(后处理器)讲解
概述: BeanPostProcessor接口是众多Spring提供给开发者的bean生命周期内自定义逻辑拓展接口中的一个,其他还有类似InitializingBean,DisposableBean, ...
- mysql数据库-注释相关介绍
mysql执行的sql脚本中注释怎么写? mysql 服务器支持 # 到该行结束.-- 到该行结束 以及 /* 行中间或多个行 */ 的注释方格: mysql; # 这个注释直到该行结束 mysql; ...
- 二叉树终极教程--BinarySearchTree
BinarySearchTreeMap 的 实现 public interface Map<K extends Comparable<K>, V> { void put(K k ...
- oracle 数据库(表)的逻辑备份与恢复
一.介绍逻辑备份是指使用工具export将数据对象的结构和数据导出到文件的过程.逻辑恢复是指当数据库对象被误操作而损坏后使用工具import利用备份的文件把数据对象导入到数据库的过程.物理备份即可在数 ...
- MySQL高级查询(一)
修改表 修改表名 语法: ALTER TABLE<旧表名> RENAME [TO] <新表名>; 添加字段 语法: ALTER TABLE 表名 ADD 字段名 数据类型 ...
- Linux 环境下java安装及配置
操作系统环境: Red Hat Enterpriser Linux 6.5 jdk版本: jdk1.8.0_144 1 从官网下载Linux操作系统对应的jdk版本文件 2 安装jdk 3 安装完 ...
- Coin Change (IV) (dfs)
Coin Change (IV) Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %lld & %llu [Subm ...
- yii2-swiftmailer入门
1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...
- Python实战之用类的静态方法实现登录验证
#!usr/bin/env Python3 # -*-coding:utf-8-*- __author__="William" #define a class,just to le ...
- 大概是:整数划分||DP||母函数||递推
整数划分问题 整数划分是一个经典的问题. Input 每组输入是两个整数n和k.(1 <= n <= 50, 1 <= k <= n) Output 对于每组输入,请输出六行. ...