Q: Remapping import path for browsers

[greghornby]

TypeScript Version: 2.6.1

I am using a library called "gl-matrix" which I have the code and typings installed via npm.
npm install gl-matrix
npm install @types/gl-matrix

And it works fine in typescript with intellisense and all

root/src/index.js

import { mat4 } from "gl-matrix";
var aMatrix = mat4.create();

but the thing is, since browsers are now starting to natively support import statements, instead having to use require.js or something, I wanna do this natively, but I can't figure out how to get it to convert to the real import path of the javascript code for gl-matrix.
When it compiles I'd like it to point to root/node_modules/gl-matrix/dist/gl-matrix-min.js so I want it to emit this

import { mat4 } from "./../node_modules/gl-matrix/dist/gl-matrix-min.js";
var aMatrix = mat4.create();

I thought I could achieve this with the paths property of tsconfig, but apparently not.
tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "outDir": "./build",
    "noImplicitAny": true,
    "baseUrl": "./src",
    "paths": {
        "gl-matrix": ["./../node_modules/gl-matrix/dist/gl-matrix-min.js"]
    },
    "rootDirs": ["src"],
    "inlineSources": true
  },
  "exclude": [
      "node_modules",
      "./tools"
  ]
}

So my question is: is it possible to remap the import path when compiling to javascript, and if so how to do it.

My directory structure is:

root

src

index.ts

node_modules

gl-matrix....

[kitsonk]

This is not a support forum.

Questions should be asked at StackOverflow or on Gitter.im.

But, TypeScript does not re-write module paths, it only provides the tools to be able to resolve different paths under different loaders.

[greghornby]

Then how about a suggestion to have this sort of behaviour. I want to be able to use browser native importing (with typescript being able to find the correct typings file for it) rather than a 3rd party loader.

Like @kitsonk said, TypeScript will not change your code, so the path you import from in the .ts source will be the same in the .js source.
When you distribute you code on your web you will need some to host the node_modules too, or you could bundle everything into one file with a tool like rollup or webpack. Whatever you do, just find what works at runtime in JS before worrying about getting the TypeScript compiler to accept it.

That said, I don't think we have a good mechanism for allowing you to match up relative node_modules imports with a corresponding @types package, so maybe there is something we need to support here. Path mapping won't work on relative imports. Neither do ambient module declarations.

[kitsonk]

The native browser loader will not load CommonJS modules anyways (standard Node.js module format), so I don't think you are missing relative node_modules type resolution it simply won't work with most packages and there is still the very experimental .mjs format for Node. In particular the referenced import above is an UMD module, which is not loadable by the native module loader via the import syntax.

The issues of dealing with some level of compatibility with native loaders is covered under #13422.

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.