Question

我在mono-repo中有2个CRA项目-P1和P2。

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

P1包含一些共享的基础结构源文件，我想在P2中重用这些文件。

注意：我知道这种方法的缺点和不利方面，但是...

我尝试过的事情：

包括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/

使用纱线工作区

这很容易。纱线does not allow具有位于项目根目录之外的工作区

You cannot and must not reference a workspace that is located outside of this filesystem hierarchy.
Typescript 3.0+项目参考：
- 使用{li>更新p1 tsconfig.json
"compilerOptions": { "composite": true }
- 添加对P1 tsconfig.json的引用
references: [ { "path": "{...}/p1/" ]
- 使用P1构建tsc -b以产生声明文件
- 现在我需要以某种方式导入它。
  - 创建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的智能感知功能也可以正常工作

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

添加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()
);

在react-app-rewired中使用react-scripts代替package.json

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

Answer 2

所以，我不知道这是否是“正确”的方法，但是我之前通过使用文件监视程序（watchman，gulp等）将项目B中的文件同步到共享文件夹中来完成此操作在项目A中。

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

项目A
| _ package.json
| _ src
.. | _ index.ts
.. | _共享
..... | _ someSharedFile.ts

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

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

-

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

源文件夹外部的参考打字稿项目

2 个答案: