Javascript 在使用tsc传输所需模块后，节点无法找到具有非相对路径的模块

我们正在使用纯类型脚本构建一个应用程序。为了使导入更易于阅读，我们将typescript配置为能够通过tsconfig解析非相对路径

使用tsc将代码转换成JS代码效果很好。但每当我们想用

节点dist/demo/display.js启动应用程序时，就会出现
找不到lib/input/parser模块的错误。这是生成的.js文件的第一次导入。这是所有进口商品的普遍问题

起初我们认为这可能是我们的
tsconfig.json
的问题。但是，任何试图修改
路径
和
baseurl
键的尝试在运行js文件时都会遇到相同或不同的错误。如果
tsc
本身完成时没有错误，也会使此无效

在Webstorm中通过
jest.config.js
运行jest也能正常工作

我们找到了两个可能的解决办法。一种是将
dist
中的文件夹复制到节点\u模块中。通过符号链接执行此操作将删除一些手动工作

另一个是通过终端运行应用程序，如下所示
NODE\u PATH=dist dist/demo/display.js

这两种感觉都很粗糙。我是否在这里遗漏了一个概念，或者这就是在typescript中进行非相对导入的方式？如何配置Webstorm运行配置以运行我们的应用程序

typescript中的导入示例：

import{Parser}来自“lib/input/Parser”；

tsc
能够解决这些问题

tsconfig.json，清除了未使用的选项。留下了我们玩过的那些：

{
    "compilerOptions": {
        /* Basic Options */
        "target": "es2018", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */

        "outDir": "dist", /* Redirect output structure to the directory. */
        //     "rootDir": ".",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */


        /* Strict Type-Checking Options */
        "strict": true, /* Enable all strict type-checking options. */

        /* Module Resolution Options */
        "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
        "baseUrl": "src", /* Base directory to resolve non-absolute module names. */
        //     "paths": {
        //       "lib/*": ["lib/*"],
        //       "demo/*": ["demo/*"],
        //       "test/*": ["test/*"]
        //     },                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */

        "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

        /* Source Map Options */

        "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
        "inlineSources": true /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    }
}

jest.config.js：

module.exports = {
  "roots": [
    "<rootDir>/src/lib", //src is our folder where sources reside
    "<rootDir>/src/test",
    "<rootDir>/src/demo"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest" //tells jest to use ts-jest for ts / tsx files
  },
  //"testRegex": "(/test/.*|(\\.|/)(test|spec))\\.tsx?$", //tells Jest to look for test in any __tests__ folder
  // AND also any files anywhere that use the (.test|.spec).(ts|tsx) extension e.g. asdf.test.tsx etc.
  "testRegex": "/test/.*",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  moduleDirectories: ['node_modules', 'src']
};

TypeScript仅在单独的构建步骤中使用和实际使用：

我们对这一点的一般看法是，您应该编写在运行时工作的导入路径，并设置TS标志以满足编译器的模块解析步骤，而不是为TS编写开箱即用的导入，然后尝试使用其他步骤“修复”运行时工作的路径。（）

保留所有JavaScript代码的运行时行为。（）
下游运行时环境（如
Node.js
）将不知道映射的绝对路径，如果路径尚未转换，则会发出错误。有一个建议称为（参见相应的），它可能会在将来简化映射路径的解析。在此之前，以下是一些常见构建工具的示例：

示例：转换
@/foo/bar/index
→ <代码>/src/foo/bar/index

.babelrc
：
{
  // ...  
  "plugins": [
    [ "module-resolver", { "alias": { "^@/(.+)": "./src/\\1" }} ]
  ]
}

在
tsc
编译后的单独构建步骤中：

babel src --out-dir dist # or similar

/ 
webpack.config.js
：
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
  // ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({/* options */})]
  }
}

更多信息


（并非详尽无遗）

TypeScript仅在单独的构建步骤中使用：

我们对这一点的一般看法是，您应该编写在运行时工作的导入路径，并设置TS标志以满足编译器的模块解析步骤，而不是为TS编写开箱即用的导入，然后尝试使用其他步骤“修复”运行时工作的路径。（）

保留所有JavaScript代码的运行时行为。（）
下游运行时环境（如
Node.js
）将不知道映射的绝对路径，如果路径尚未转换，则会发出错误。有一个建议称为（参见相应的），它可能会在将来简化映射路径的解析。在此之前，以下是一些常见构建工具的示例：

示例：转换
@/foo/bar/index
→ <代码>/src/foo/bar/index

.babelrc

：

{
  // ...  
  "plugins": [
    [ "module-resolver", { "alias": { "^@/(.+)": "./src/\\1" }} ]
  ]
}

在

tsc

编译后的单独构建步骤中：

babel src --out-dir dist # or similar

/

webpack.config.js

：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
  // ...
  resolve: {
    plugins: [new TsconfigPathsPlugin({/* options */})]
  }
}

更多信息

• （并非详尽无遗）

---

要构建项目，请在项目根目录中键入

tsc

。然后用

节点dist/demo/display运行JS。JS

还有其他事情要做吗？这是我的第一个Typescript项目。所以我缺乏很多内部知识。在你第一次评论之后，我读到了巴贝尔。听起来是个很棒的工具。我真的不明白babel和typescript是如何结合在一起的。Babel和TS都可以将我的代码转换成Javascript。我现在理解了将路径转换回相对路径的必要性。这就是我所需要的巴贝尔（或类似的）？我们的目标是先为一个控制台应用程序编写一个库，然后再支持移动设备和浏览器。谢谢你的信息。如果您将您的评论作为答案发布，我将接受。要构建项目，我在项目根目录中键入

tsc

。然后用

节点dist/demo/display运行JS。JS

还有其他事情要做吗？这是我的第一个Typescript项目。所以我缺乏很多内部知识。在你第一次评论之后，我读到了巴贝尔。听起来是个很棒的工具。我真的不明白babel和typescript是如何结合在一起的。Babel和TS都可以将我的代码转换成Javascript。我现在理解了将路径转换回相对路径的必要性。这就是我所需要的巴贝尔（或类似的）？我们的目标是先为一个控制台应用程序编写一个库，然后再支持移动设备和浏览器。谢谢你的信息。如果你把你的评论作为回答，我会接受的。