在源文件夹之外引用 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 中重复使用。

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

我尝试了什么：

1. 从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/
   

2. 使用纱线工作区

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

   You cannot and must not reference a workspace that is located outside of this filesystem hierarchy.

3. Typescript 3.0+ 项目参考：

   • 将p1 tsconfig.json 更新为

   "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 可以正常工作

4. 使用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

1. 添加customize-cra和react-app-rewired包

2. 添加到引用的tsconfig.json：

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

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

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

4. 在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" }
  ]

5. 在项目根目录下创建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()
);

6. 在package.json 中使用react-app-rewired 而不是react-scripts

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

Answer 2

所以，我不知道这是否是“正确”的方式，但我之前已经通过使用文件观察器（watchman、gulp 等）将项目 B 中的文件同步到共享文件夹中来做到这一点在项目 A 中。

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

项目 A
|_ 包.json
|_ 源
..|_ index.ts
..|_ 共享
.....|_ someSharedFile.ts

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

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

--

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