How to convert a non-relative path to a relative path in TypeScript tsconfig.json configuration
relative imports start with /,. /, or.. /. Here are some examples:
- import Entry from ". / components/Entry";
- import {DefaultHeaders} from ".. / constants/http";
- import "/ mod";
all other forms of import are treated as non-relative. Here are some examples:
- import * as $from "jQuery";
- import {Component} from "@ angular/core";
that means my problem is to compile import "jquery" into import jquery from". / xxx/xxx/jquery"
< H2 > configuration file < / H2 >
{
"compilerOptions": {
"module": "commonjs",
"target": "ES6",
"outDir": "../dist",
"sourceMap": true,
"lib": [
"dom",
"es2015",
],
"typeRoots": [
"../node_modules/@types"
],
"baseUrl": "../",
"paths": {
"request":["node_modules/request/request.js"]
}
},
"files": [
"../test/test.ts"
]
}
< H2 > directory structure < / H2 >
-
folder where config saves tsconfig.json
- dist outputs the directory of compilation results
-
node_modules node module folder
-
Files used by the test test
- test.ts files waiting to be compiled
< H2 > problem description < / H2 >
assume that my current project path is under / .
there is the following content in / test/test.ts .
import * as request from "request"
console.log(request);
under the / path, I use the following command to compile:
tsc -p ./config/tsconfig.json
output under / dist :
Let"s take a look at the contents of test.js:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const request = require("request");
console.log(request);
//-sharp sourceMappingURL=test.js.map
so the problem is that if we are running in Node, according to the loading rules of node, it can actually be loaded.
but I want the final path at compile time to be the relative path require (".. / node_modules/request/request.js") , rather than a request .
in tsconfig.json above, I tried to use the baseUrl and paths attributes, but they didn"t work as expected, because I misunderstood them or operated in the wrong way.
Brother, have you solved it yet? I have the same problem.
< H1 > Core of the problem < / H1 >
the path of the complete relative import after typescript compilation does not change with the directory of outDir output.
const abc = require('./node_modules/xxx/dist/xxx.min.js');
this is not a problem in itself, but considering the following directory structure, we put this introduction into index.js:
+-- dist
+-- node_modules
+- index.ts
but we set the output directory in the dist folder, and the final output result:
+-- dist
+-- index.js
+-- node_modules
+- index.ts
but index.js will report an error when executing const abc = require ('. / node_modules/xxx/dist/xxx.min.js'); cannot parse to the specified file because there is no node_modules directory in the dist directory.
< H1 > solution < / H1 >
is actually very simple, because we forgot the parsing rules of node and typescript.
We write only two kinds of ts code:
- We wrote it ourselves
- other people's third-party modules
in node, all the third-party modules are placed under the node_modules directory, while node will match the node_modules directory according to its name at run time. It will look up the node_modules directory from the current path and enter it for matching.
while typescript can parse the node module, the parsing rules are the same as node.
so we don't need to write a complete introduction at all, just write relative .
for our problem, for example, if we want to introduce multiple compressed versions of jquery, we don't have to start with the current path:
import $ from "jquery/dist/jquery.min.js";
typescript will find it automatically and parse to the module correctly when node executes.
< H1 > expand < / H1 >
what should we do with our own third-party modules.
the most convenient thing is to upload directly to npm, but you have other options.
you can use the package.json file to find the dependencies in package.json in the current node_modules directory. Npm can install modules from the git repository. For example, I wrote a myjquery module and uploaded it to github,. After installing this module, it may be shown in package.json as follows:
----
"dependencies": {
"myjquery": "git://github.com/xxxx/myjquery.git-sharpdev",
},
----
execute when installing a module using npm:
npm myjquery git://github.com/xxxx/myjquery.git-sharpdev --save
finally:
you can even fill in your module directly in the node_modules folder, then write the corresponding directory name in package.json, and then give him a fake version number, which can also be run.
the corresponding direct name and filling can be run and parsed, but npm will check every time you install the package or update, and the module we filled in manually will be removed.
