我目前正在开发一个TypeScript应用程序,它由多个用TypeScript编写的 node 模块组成,安装在node_modules目录中.

在继续之前,我想指出,我使用的是TypeScript 2.0,如果需要的话,我并不反对使用2.1开发版本.我只是想让它运转起来.

每个 node 模块的 struct 大致如下:

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文件夹是生成的源,使用my tsconfig.json文件中的outDir配置此路径.我还将package.json中的main属性配置为dist/es2015/index.js.

Important things to note:

  • 在我的项目中,我使用moduleResolutionnode
  • 我使用的是TypeScript 2.0
  • 我不是问如何从包中导入文件.我通过Npm安装软件包,然后通过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,然后在他们的应用程序中try 导入某些内容时,所有导入默认解析到commonjs目录(上面的Jspm示例使用amd,但前提相同).

这是可能的还是我误解了什么?我知道最新版本中添加了一些新的路径映射功能,但关于使用它们的文档几乎不存在.

推荐答案

所以读了你的 comments 后,我意识到我误解了你的问题!如果想从导入包的Angular 控制路径,只需将package.jsonmain属性设置为正确表示模块对象图的文件.

{
  "main": "common-utils/dist/es2015/index.js"
}

如果您试图从项目的Angular 控制导入路径,那么您需要的是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中路径映射功能的更多详细信息,请参见this Github issue.

在您的情况下,我认为以下配置应该可以工作:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
    }
  }
}

Typescript相关问答推荐

Angular 17 -如何在for循环内创建一些加载?

是否可以根据嵌套属性来更改接口中属性的类型?

如何推断哪个特定密钥与泛型匹配?

Angular 错误NG0303在Angular 项目中使用app.Component.html中的NGFor

如何按不能保证的功能过滤按键?

ANGLE找不到辅助‘路由出口’的路由路径

为什么在这个例子中,我把缺少的属性添加到对象中时,TypeScrip没有拾取,如何修复?

TypeScrip省略了类型参数,仅当传递另一个前面的类型参数时才采用默认类型

如何使这种一对一关系在旧表上起作用?

如何将类似数组的对象(字符串::匹配结果)转换为类型脚本中的数组?

将超类型断言为类型脚本中的泛型参数

如何为特定参数定义子路由?

错误TS7030:并非所有代码路径都返回值.";由tsfig.json中的";Strong";:False引起

如何扩展RxJS?

当传递带有或不带有参数的函数作为组件props 时,我应该如何指定类型?

如何在Next.js和Tailwind.css中更改悬停时的字体 colored颜色

如何在Angular /字体中访问API响应的子元素?

React-跨组件共享功能的最佳实践

为什么过滤器不改变可能的类型?

为什么我们在条件语句中使用方括号[]?