"package.json"不在"rootDir"下 [英] 'package.json' is not under 'rootDir'

问题描述

我正在尝试在TypeScript应用程序中导入package.json:

I'm trying to import package.json in my TypeScript application:

import packageJson from '../package.json';

我的tsconfig.json包含以下内容:

{
  "compilerOptions": {
    "rootDir": "./src/"
    "outDir": "./dist/",
    "baseUrl": ".",
    "resolveJsonModule": true
  }
}

问题是当我编译它时，我得到了

The problem is that when I compile this, I get

error TS6059: File '/path/to/package.json' is not under 'rootDir' '/path/to/app/src/'. 'rootDir' is expected to contain all source files.

我不确定我是否理解此问题，因为./src/和/.dist都具有相同的父级..，因此TypeScript可以单独使用import '../package.json'和它可以工作从rootDir或outDir.

I'm not sure I understand the issue, because both ./src/ and /.dist have the same parent .., so TypeScript could just leave alone the import '../package.json' and it would work from either rootDir or outDir.

无论如何，我尝试了以下方法，但结果均不令人满意:

Anyway, I've tried the following, with unsatisfactory results:

• 删除rootDir-编译有效，但dist将包含dist/src，我不希望
• 删除outDir-然后src被.js文件污染(如果sourceMap为true，则污染.js.map)
• 添加@ts-ignore-编译会停止导入../package.json
的文件

• remove rootDir - compilation works, but the dist will contain dist/src, which I don't want
• remove outDir - then src gets polluted with .js files (and .js.map if sourceMap was true)
• add @ts-ignore - compilation stops the the file that imports ../package.json

此限制的解决方法是什么，将生成的文件保留在dist中，并允许从rootDir的父目录导入?

What's the workaround for this limitation, to keep generated files in dist, and allow importing from the parent directory of rootDir?

推荐答案

这是可能，事实证明，不难.

解决方案之所以不明显，是因为打字稿依靠rootDir来决定输出的目录结构(请参见

The reason the solution is not obvious is because typescript relies on the rootDir to decide the directory structure of the output (see this comment from Typescript's bossman), and only code included in the output or in package dependencies can be imported.

• 如果将rootDir设置为项目的根目录，则package.json会发射到outDir的根目录并可以导入.但是随后，您编译的src文件将被写入outDir/src.
• 如果将rootDir设置为src，则其中的文件将编译到outDir的根目录.但是现在编译器将没有位置发出package.json ，因此它发出错误，因为项目似乎配置错​​误"(老板的话).

• If you set rootDir to the root of your project, package.json gets emitted to the root of outDir and can be imported. But then your compiled src files get written to outDir/src.
• If you set rootDir to src, files in there will compile to the root of outDir. But now the compiler won't have a place to emit package.json, so it issues "an error because the project appears to be misconfigured" (bossman's words).

一个 Typescript项目由 tsconfig 文件定义，是自包含的，并且受有效地限制其rootDir.这很不错，因为它符合封装原理.

A Typescript project is defined by a tsconfig file, is self-contained, and is effectively bounded by its rootDir. This is a very good thing, as it lines up with principles of encapsulation.

您可以在各自的目录中以及各自的tsconfig中拥有多个项目(例如，一个主库和一组库).使用Typescript 项目引用在tsconfig文件中声明它们之间的依赖关系.

You can have multiple projects (e.g. a main and a set of libs) each in their own directory and with their own tsconfig. Dependencies between them are declared in the tsconfig file using Typescript Project References.

我承认，术语项目"是一个可怜的词，因为直觉上是指整个shebang，但是在这种情况下已经采用了模块"和包".将它们视为子项目"，这样会更有意义.

I admit, the term "projects" is a poor one, as intuitively it refers to the whole shebang, but "modules" and "packages" are already taken in this context. Think of them as "subprojects" and it will make more sense.

我们将src目录和包含package.json的根目录视为单独的项目.每个文件都有自己的tsconfig文件.

We'll treat the src directory and the root directory containing package.json as separate projects. Each will have its own tsconfig file.

1. 为src dir提供自己的项目.

1. Give the src dir its own project.

./src/tsconfig.json :

./src/tsconfig.json:

{
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "../dist/",
    "resolveJsonModule": true
  },
  "references": [      // this is how we declare a dependency from
    { "path": "../" }  // this project to the one at the root dir`
  ]
}   

为根目录指定自己的项目.

Give the root dir its own project.

./tsconfig.json :

./tsconfig.json:

{
  "compilerOptions": {
    "rootDir": ".",
    "outDir": ".",  // if out path for a file is same as its src path, nothing will be emitted
    "resolveJsonModule": true,
    "composite": true  // required on the dependency project for references to work
  },
  "files": [         // by whitelisting the files to include, TS won't automatically
    "package.json"   // include all source below root, which is the default.
  ]
}

运行tsc --build src并瞧瞧！

run tsc --build src and voilà!

这将构建src项目.因为它声明了对根项目的引用，所以也将构建该项目，但前提是该项目已过时.因为根tsconfig与outDir具有相同的目录，所以tsc不会对package.json进行任何操作，package.json是它配置为可编译的一个文件.

This will build the src project. Because it declares a reference to the root project, it will build that one also, but only if it is out of date. Because the root tsconfig has the same dir as the outDir, tsc will simply do nothing to package.json , the one file it is configured to compile.

这对monorepos非常有用

• 您可以通过将模块/库/子项目放在它们自己的子目录中并为其提供自己的tsconfig来隔离它们.

  this is great for monorepos

  • You can isolate modules/libraries/sub-projects by putting them in their own subdirectory and giving them their own tsconfig.

    您可以使用项目引用显式管理依赖项，以及模块化构建:

    You can manage dependencies explicitly using Project References, as well as modularize the build:

    从链接的文档中:

    • 您可以大大缩短构建时间

    期待已久的功能是用于TypeScript项目的智能增量构建.在3.0中，可以将--build标志与tsc一起使用.实际上，这是tsc的新入口点，其行为更像是构建协调器，而不是简单的编译器.

    A long-awaited feature is smart incremental builds for TypeScript projects. In 3.0 you can use the --buildflag with tsc. This is effectively a new entry point for tsc that behaves more like a build orchestrator than a simple compiler.

    运行tsc --build(简称为tsc -b)将执行以下操作:

    Running tsc --build (tsc -b for short) will do the following:

    • 找到所有引用的项目
    • 检测是否为最新
    • 以正确的顺序构建过时的项目
    • Find all referenced projects
    • Detect if they are up-to-date
    • Build out-of-date projects in the correct order

    不用担心在命令行上传递的文件的顺序-tsc会在需要时对它们进行重新排序，以便始终先构建依赖项.

    Don’t worry about ordering the files you pass on the commandline - tsc will re-order them if needed so that dependencies are always built first.

    • 加强组件之间的逻辑分离

      以新的更好的方式组织代码.

      organize your code in new and better ways.

      这也很容易:

      • src/tsconfig.json

      • src/tsconfig.json

      即使您在根目录下没有代码，此tsconfig也可以位于 所有常用的设置都可以使用(其他设置将继承自该设置)，并且 这将使一个简单的tsc --build src可以构建整个 项目(并使用--force从头开始构建它).

      Even if you have no code at the root, this tsconfig can be where all the common settings go (the others will inherit from it), and it will enable a simple tsc --build src to build the whole project (and with --force to build it from scratch).

      {
        "compilerOptions": {
          "rootDir": ".",
          "outDir": "../build/",
          "resolveJsonModule": true,
          "composite": true
        },
        // this root project has no source of its own
        "files": [],
        // but building this project will build all of the following:
        "references": [
          { "path": "./common" }
          { "path": "./projectA" }
          // include all other sub-projects here  
        ]
      }
      

      • src/common/tsconfig.json

        • src/common/tsconfig.json

          由于 common 没有引用，因此导入仅限于其目录和npm_modules中的目标.我相信，您甚至可以通过赋予它自己的package.json来限制后者.

          Because common has no references, imports are limited to targets within its directory and npm_modules. You could even restrict the latter, I believe, by giving it its own package.json.

              {
               "compilerOptions": {
                  "rootDir": ".",
                  "outDir": "../../build/common",
                  "resolveJsonModule": true,
                  "composite": true
                }
              }
          

        • src/projectA/tsconfig.json

        • src/projectA/tsconfig.json

          projectA 可以导入 common .

              {
                "compilerOptions": {
                  "rootDir": ".",
                  "outDir": "../../build/libA",
                  "resolveJsonModule": true,
                  "composite": true
                },
                "references": [
                  { "path": "../common" }
                ]
              }
          

        这篇关于"package.json"不在"rootDir"下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！