Using baseUrl and paths on node

[unional]

I notice the feature is for requirejs and systemjs. And as this comment said, the emitted js code is unchanged by the configuration:
#5039 (comment)

So the primary usage is to resolve packages in various locations (e.g. jspm_packages) for transpilation.

I have the following interesting use case. It worked for me so far as I was using jspm, i.e. the actual module loading happens on the browser. However it fails when I try to do the same using ts-node (fail because it runs on node and the reason above).

Is there a way to support this?

Here is the example:

// tsconfig.json
{
  "compileOptions": {
    "baseUrl": ".",
    "paths": {
      "my-package": [ "src/" ]  // i.e. mapping the package name to the source folder
    }
  }
}

// test/sometest.ts
import abc from 'my-package';
...

i.e., using paths so tests can reference the source as if it is a regular module.
🌷

Reference issue on ts-node: TypeStrong/ts-node#138

[mhegazy]

this is already supported in TS today. if you run tsc it should resolve your module. i would say this is specific to how ts-node works.

[unional]

Yes. Tsc compiles successfully. But as you mentioned in the past, there is no change(path rewrite) on the emitted js files. If I run the test js file through node, would result in the same error

[kitsonk]

But as you mentioned in the past, there is no change(path rewrite) on the emitted js files. If I run the test js file through node, would result in the same error

But that is the purpose of these settings, to allow module loaders than can remap modules to remap modules. The CommonJS loader in NodeJS was not designed as a module loader that is configurable in this way, because the base assumption is that you would have access to a file system with a very deterministic resolution pattern for resolving modules.

I personally would not want TypeScript to re-write MIDs, but giving the flexibility to resolve modules in the way my loader will resolve modules at run-time, which TypeScript 2.0 does perfectly.

Especially with CJS under NodeJS, because the default loader is not configurable in that sense, any remapping by TypeScript would require making invalid assumptions about the run-time environment and likely result in code that does not work at run-time and certainly not a distributable package that could be consumed by anyone using npm.

Because of the assumptions made by the CJS loader in NodeJS we distribute our packages in UMD format and recommend people use an AMD loader that easily allows remapping, even when running under NodeJS. But knowing that there is a "cowpath" to CJS we include an index.js in the root of our packages which loaders a transpiled main.ts (which is the "default" for AMD) which exports the public API of the package. We use dts-generator to create a .d.ts where the main module for the package gets exported as the package name, therefore providing the types when the package is required. It does mean that those loading only under CJS are limited to the main module, while those using AMD or another configurable loader can reference each module individually.

[unional]

But that is the purpose of these settings

Fully understand that is how it should be used, just that I found this use case interesting because it creates a mental disconnect between what's appear to be working on the IDE but failed on runtime.

One option is to add a mapPathForNode flags that will create a separate js file that does the remapping under node (I'm not excel in node so I don't know if this is possible).
Just brainstorming.

[unional]

To make sure I deliver my message correctly, I don't want to suggest a feature that doesn't have a real use case.

In this case, it is like "I abuse the system and complain it doesn't work". Fully aware of that. Just want to open the discussion to see if this would lead to some interesting possibilities.

🌷

[kitsonk]

One option is to add a mapPathForNode flags that will create a separate js file that does the remapping under node (I'm not excel in node so I don't know if this is possible).

That seem clearly the domain for tooling outside of the scope of TypeScript. Especially considering the design goals:

3. Impose no runtime overhead on emitted programs.
4. Preserve runtime behavior of all JavaScript code.

And anti-goal:

5. Add or rely on run-time type information in programs, or emit different code based on the results of the type system. Instead, encourage programming patterns that do not require run-time metadata.

[papercuptech]

Appreciating TS's position, here's a simple solution to the 90% use case for those of us using node, but wanting the convenience of using baseUrl relative require() calls without any fuss.

This solution hooks node's require() call, and resolves requests using the dirname of "main" to mimic baseUrl. It therefore assumes the baseUrl compiler option was also set to the same directory where the source "main.ts" was located.

To use, paste this tiny chunk of code at the top of your "main.ts".

import * as path from 'path'
import * as fs from 'fs'
(function() {
  const CH_PERIOD = 46
  const existsCache = {d:0}; delete existsCache.d
  const baseUrl = path.dirname(process['mainModule'].filename)
  const moduleProto = Object.getPrototypeOf(module)
  const origRequire = moduleProto.require
  moduleProto.require = function(request) {
    let existsPath = existsCache[request]
    if(existsPath === undefined) {
      existsPath = ''
      if(!path.isAbsolute(request) && request.charCodeAt(0) !== CH_PERIOD) {
        const ext = path.extname(request)
        const basedRequest = path.join(baseUrl, ext ? request : request + '.js')
        if(fs.existsSync(basedRequest)) existsPath = basedRequest
        else {
          const basedIndexRequest = path.join(baseUrl, request, 'index.js')
          existsPath = fs.existsSync(basedIndexRequest) ? basedIndexRequest : ''
        }
      }
      existsCache[request] = existsPath
    }
    return origRequire.call(this, existsPath || request)
  }
})()

[Axure]

@papercuptech This is brilliant. I modified your code and it worked like a charm in my isomorphic react project.

(function () {
  const baseUrl = path.join(cwd, tsConfig.compilerOptions.baseUrl);
  const moduleProto = Object.getPrototypeOf(module);
  const origRequire = moduleProto.require;
  const pathKey = {};
  for (const [key, value] of Object.entries(tsConfig.compilerOptions.paths)) {
    pathKey[key.slice(0, -2)] = value[0].slice(0, -2);
  }
  moduleProto.require = function (request) {
    if (request[0] === '@') {
      const pathName = request.match(/(@.*?)\//)[1];
      const relativeToBase = path.relative(path.dirname(this.id), baseUrl);
      existsPath = relativeToBase + '/' + pathKey[pathName] +  request.slice(pathName.length);
      return origRequire.call(this, existsPath || request)
    }
    return origRequire.call(this, request);
  };
})();

Here I'm assuming that the tsconfig.json is like

    "paths": {
      "@pages/*": ["./ui/pages/*"],
      "@components/*": ["./ui/components/*"],
    },

where the keys in the paths start with @. If someone needs it to be more general, modifications could be made further.

[aleccool213]

@papercuptech So many people on the internet want this. Would be a neat idea to implement this into a stable package possibly.

[blakeembrey]

Maybe you'd be interested in https://github.com/jonaskello/tsconfig-paths?

[gaperton]

Maybe you'd be interested in https://github.com/jonaskello/tsconfig-paths?

Yes. Thank you.