[英]TypeScript Import Path Alias
我目前正在开发一个TypeScript应用程序,它由多个用TypeScript编写的Node模块组成,安装在node_modules
目录中。
在继续之前,我想指出我使用的是TypeScript 2.0,如果需要的话,我也不会对使用2.1 dev版本感到不利。 我只是想让这个工作。
每个Node模块的结构都是这样的:
dist/
es2015/
index.js
utils/
Calculator.js
Calculator.d.ts
Date.js
Date.d.ts
Flatpack.js
Flatpack.d.ts
src/
index.ts
utils/
Calculator.ts
Date.ts
Flatpack.ts
dist文件夹是生成的源,使用我的tsconfig.json
文件中的outDir
配置此路径。 我还将package.json
的main
属性配置为dist/es2015/index.js
。
需要注意的重要事项:
moduleResolution
类型的node
packagename/
从使用此模块的应用程序中导入它。 现在是我的问题/问题。 从这个模块导入文件时,我希望能够这样做:
import {Sin, Cos, Tan} from "common-utils/utils/Calculator";
但是,该文件无法解析到dist/es2015/utils
目录。 理想情况下,我希望我的导入能够从这个特定的dist
文件夹解析,而不是从根目录解析,这似乎正在发生。
上面的导入需要写成以下内容才能使其工作:
import {Sin, Cos, Tan} from "common-utils/dist/es2015/utils/Calculator";
然而,每次写dist/es2015
并不理想,只是让一些导入看起来很长。 有没有办法可以配置我的模块解析到dist/es2015
目录? 我不想在我的项目中放入覆盖,理想情况下,每个模块都会指定文件的解析位置。
如果你在Jspm中创建一个与Jspm一起使用的插件/模块时仍然不确定我在问什么(我道歉,如果这令人困惑),你可以在package.json
为模块指定如下内容:
"jspm": {
"registry": "npm",
"jspmPackage": true,
"main": "my-module",
"format": "amd",
"directories": {
"dist": "dist/amd"
},
我正在寻找TypeScript中的上述内容(如果它存在)。 一个映射指令,所以当最终用户运行npm install my-cool-package
然后在他们的应用程序中尝试导入一些东西时,默认情况下所有导入都会解析为commonjs
目录(上面的Jspm示例使用amd,但前提是相同)。
这可能还是我在这里误解了什么? 我知道在最新版本中添加了一些新的路径映射功能,但使用它们的文档几乎不存在。
所以在看完你的评论后,我意识到我误解了你的问题! 如果要从导入包的角度控制路径,只需将package.json
的main
属性设置为正确表示模块对象图的文件。
{
"main": "common-utils/dist/es2015/index.js"
}
如果您试图从项目的角度控制导入路径,那么您正在寻找的是TypeScript 2的模块分辨率的新路径映射功能。 您可以通过配置tsconfig.json
来启用路径映射,如下所示:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"angular2/*": ["../path/to/angular2/*"],
"local/*": ["../path/to/local/modules/*"]
}
}
}
然后,在TypeScript文件中,您可以导入如下模块:
import { bootstrap } from 'angular2/bootstrap';
import { module } from 'local/module';
有关TypeScript 2中的路径映射功能的更多详细信息,请参阅此Github问题 。
在您的情况下,我认为以下配置应该工作:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
}
}
}
如果您正在使用路径,则需要将绝对路径更改为相对路径,以便在使用tsc
将tsc
编译为纯JavaScript后将其工作。
到目前为止,最流行的解决方案是tsconfig-paths 。
我试过了,但是对于我复杂的设置它并不适用。 此外,它在运行时解析路径,这意味着在包大小和解决性能方面的开销。
所以,我自己写了一个解决方案, tscpaths 。
我说它总体上更好,因为它在编译时替换了路径。 这意味着没有运行时依赖性或任何性能开销。 它使用起来非常简单。 您只需要在package.json
为构建脚本添加一行。
该项目非常年轻,如果您的设置非常复杂,可能会出现一些问题。 虽然我的设置相当复杂,但它对我的设置完美无缺。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.