ChatGPT解决这个技术问题 Extra ChatGPT

TypeScript Import Path Alias

I am currently working on a TypeScript application which is comprised of multiple Node modules written in TypeScript, that are installed into the node_modules directory.

Before continuing, I would like to note that I am using TypeScript 2.0, I am not adverse to using the 2.1 dev release if need be as well. I just want to get this working.

The structure of each Node module is something along the lines of:

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

The dist folder is the generated source, with this path being configured using outDir inside of my tsconfig.json file. I have also configured the main property in my package.json to be dist/es2015/index.js.

Important things to note:

In my project I am using moduleResolution type of node

I am using TypeScript 2.0

I am not asking how to import a file from within the package. I am installing the package via Npm and then importing it via packagename/ from within an application that is using this module.

Now comes my question/issue. Whilst importing files from this module, I would like to be able to do this:

import {Sin, Cos, Tan} from "common-utils/utils/Calculator";

However, the file cannot resolve to the dist/es2015/utils directory. Ideally I would like my imports to resolve from this specific dist folder and not from the root, which is what appears to be happening.

The above import needs to be written as the following to get it to work:

import {Sin, Cos, Tan} from "common-utils/dist/es2015/utils/Calculator";

However, writing dist/es2015 each time is not ideal and it just makes some of the imports look really long. Is there a way I can configure my module to resolve to the dist/es2015 directory? I don't want to have to put in overrides inside of my project, ideally each module would specify where files are resolved from.

If you are still unsure what I am asking (and I apologise if this is confusing) in Jspm when you create a plugin/module to be used with Jspm, you can specify inside of the package.json for the module something like the following:

  "jspm": {
    "registry": "npm",
    "jspmPackage": true,
    "main": "my-module",
    "format": "amd",
    "directories": {
      "dist": "dist/amd"
    },

I am looking for the equivalent of the above in TypeScript (if it exists). A mapping directive, so when the end user runs npm install my-cool-package and then in their app tries to import something, all imports by default resolve to the commonjs directory (the above example for Jspm uses amd, but same premise).

Is this possible or am I misunderstanding something here? I know some new path mapping features were added into the latest release, but documentation on using them is almost nonexistent.

if you are importing Calculator.ts in index.ts you can try import {Sin,Cos,Tan} from "./utils/Calculator"
This would definitely work if importing from within the package itself. However, my issue is that this is a module I install into node_modules and then import using `from "packagename/" - the issue is that adding in the direct path to the dist folder feels messy, I would like to alias it to make this the default import location, but do it from within the module, not something I have to configure in the project consuming the module.
What if you add config object where you can add package name or file name and 'build' your path, also look at system.js or webpack for this tasks
I was hoping to avoid build tasks for making the path logic work. Having said that, this seems to be the norm for how most CommonJS modules are built.

f
fny

So after reading your comment, I realized I misunderstood your question! If you want to control the paths from an imported package's perspective, just use set the main property of your package.json to a file that properly represents the object graph of your module.

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

If you're attempting to control the import paths from a project's perspective, what you're looking for is TypeScript 2's new path mapping feature for module resolution. You can enable path mapping by configuring your tsconfig.json as follows:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "angular2/*": ["../path/to/angular2/*"],
      "local/*": ["../path/to/local/modules/*"]
    }
  }
}

Then, in your TypeScript files, you can import the modules like this:

import { bootstrap } from 'angular2/bootstrap';
import { module } from 'local/module';

For more details about the Path Mapping feature in TypeScript 2 see this Github issue.

In your case, I think the following configuration should work:

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

Thanks @faraz. I will give this a try sometime this morning. The path configuration goes into my module though, not the project, right? And then the TypeScript compiler when I pull in my module should pick up the paths defined within this file, correct?
No, the path configuration goes in your TypeScript project, and it should point to the module you want to reference from your project.
I thought as much as I did get it working similarly within the project. Does this mean what I am asking to do is not currently possible in TypeScript itself from a module perspective? I would love to do the above, but define it in the package itself so when imported, the path aliases are picked up. Jspm allows packages to configure aliases for paths, I was hoping TypeScript offered the same as telling the user to add these path aliases in is a little bit painful. Are multiple wildcards supported within the one pathing glob string?
Ah, I misunderstood your question! I didn't realize you we're trying to direct configuration from packages. Why not just set the main property in your package.json to an appropriate index file?
Will this approach let me use import {Date} from 'common-utils/src/utils/Date' from a Typescript app and have tsc rewrite it as dist/....?
J
Joon

If you are using paths, you will need to change back absolute paths to relative paths for it to work after compiling typescript into plain javascript using tsc.

Most popular solution for this has been tsconfig-paths so far.

I've tried it, but it did not work for me for my complicated setup. Also, it resolves paths in run-time, meaning overhead in terms of your package size and resolve performance.

So, I wrote a solution myself, tscpaths.

I'd say it's better overall because it replaces paths at compile-time. It means there is no runtime dependency or any performance overhead. It's pretty simple to use. You just need to add a line to your build scripts in package.json.

The project is pretty young, so there could be some issues if your setup is very complicated. It works flawlessly for my setup, though my setup is fairly complex.