在源文件夹之外引用 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. 包括P1从P2和导入：

   • 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不允许在项目根目录之外拥有工作区

   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/" ]

   • Build P1withtsc -b生成声明文件

   • 现在我需要以某种方式导入它。

     • 创建tsconfig.paths.json于配置 paths部分

     • 添加rootDirtpP1 tsconfig.json以指向root/文件夹

     • 添加路径 "@lib/*": ["<relative-path-to-p1>/p1/src/shared/*"]

   结果：

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

   我还看到 VSCode 正确识别我的配置并且import智能感知正常工作

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
}

3. 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. 使用react-app-rewired而不是react-scripts在package.json

注意：这是修改后的代码，因此可能需要一些细微的更改。