在源文件夹之外引用 Typescript 项目

Question

我在单一仓库中有 2 个 CRA 项目 - P1 和 P2。

root/
  projects/
    p1/
      package.json
      tsconfig.json
      src/
        shared/
          **/*.ts
    p2/
      package.json
      tsconfig.json
      src/
        **/*.ts

P1 包含一些共享的基础设施源文件，我想在 P2.

中重用这些文件

注意：我知道这种方法的缺点和负面影响，但是...

我尝试了什么：

从 P2 中包含 P1 并导入：

P1 tsconfig.json修改为

"include": [..., "root/projects/p1/src/shared/**/*.ts]
P2源文件通过相对路径导入.ts文件

结果：

You attempted to import <path> which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/

使用 yarn 工作空间

这个很简单。 Yarn does not allow 在项目根目录之外拥有工作区

You cannot and must not reference a workspace that is located outside of this filesystem hierarchy.
Typescript 3.0+ 项目参考：
- 用
"compilerOptions": { "composite": true }
- 添加对 P1 tsconfig.json
references: [ { "path": "{...}/p1/" ]
- 用 tsc -b 构建 P1 以生成声明文件
- 现在我需要以某种方式导入它。
  - 创建 tsconfig.paths.json 到 configure paths 部分
  - 添加 rootDir tp P1 tsconfig.json 指向 root/ 文件夹
  - 添加路径"@lib/*": ["<relative-path-to-p1>/p1/src/shared/*"]
结果：

Cannot find module: '@lib/....'. Make sure this package is installed

我还看到 VSCode 正确识别了我的配置并且 import intellisense 正常工作

使用react-app-rewired

在我的 config-overrides.js 中，我添加了类似

的内容

module.exports = function override(config, env) {
  config.resolve.alias = {
    "@lib": path.resolve(__dirname, '...p1/src/shared/')
  }
}

这适用于项目内的所有别名。但就我而言，它失败了

You attempted to import <root>/p1/src/shared... which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/

Answer 1

所以，我不知道这是否是 "right" 方式，但我之前通过使用文件观察器（watchman、gulp 等）来同步将项目 B 中的文件复制到项目 A 中的共享文件夹中。

使用此方法时，请确保 .gitignore 复制的文件。

项目 A
|_ package.json
|_ 源码
..|_ index.ts
..|_ 分享
.....|_ someSharedFile.ts

项目 B
|_ gulpfile.js
|_ 源码
...|_ someSharedFile.ts

https://css-tricks.com/gulp-for-beginners/

--

另一种方法是从项目 B 创建一个 NPM 包并将其安装到项目 A。

Answer 2

添加 customize-cra 和 react-app-rewired 包
添加到引用 tsconfig.json:

{
  "compilerOptions": {
    ...
    "composite": true,
    "declaration": true,
    "declarationMap": true
}

在基础项目中创建tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@alias/*": ["..relative/to/base/url/path/*"]
    }
  }
}

在tsconfig.json中添加这样的行：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "baseUrl": "<the same value as in paths file>"
  },
  "references": [
    { "path": "../relative/path/to/referenced/project/tsconfig.json/file" }
  ]

在项目根目录中创建config-override.js文件

const { override, removeModuleScopePlugin, getBabelLoader, addWebpackAlias } = require("customize-cra");
const path = require("path");
const fs = require('fs');

const updateAliases = (config) => {
  const aliases = {
    "@alias": ["absolute/path/to/base/url"]
  };

  return addWebpackAlias(aliases)(config);
};

const updateIncludes = (config) => {
  const loader = getBabelLoader(config, false);
  const commonPath = path.normalize(path.join(process.cwd(), "../relative/path/to/referenced/project/tsconfig.json/file")).replace(/\/g, "\");
  loader.include = [loader.include, commonPath];
  return config;
};

module.exports = override(
  updateAliases,
  updateIncludes,
  removeModuleScopePlugin()
);

在package.json

react-app-rewired

react-scripts

注意: 这是修改后的代码，所以可能需要做一些小的改动。

在源文件夹之外引用 Typescript 项目

Reference Typescript project outside of the source folder

typescript

create-react-app

yarnpkg