Question

我想在两个TypeScript项目之间共享代码。我不想将共享代码发布到NPM，而只是想将共享代码放在一个项目中并在另一个项目中使用它。我正在使用Webpack和awesome-ts-loader。当前的文件夹结构（简化）如下：

/devroot/
  mainProject/
    tsconfig.json
    src/
      shared/
        SomeSharedTypes.ts
  apiProject/
    tsconfig.json
    webpack.config.js
    src/
      UseSomeSharedType.ts

在UseSomeSharedType.ts中，我希望能够从SomeSharedTypes.ts导入类型。

我尝试了一个类似的明显解决方案：

import {SharedType} from '../../mainProject/src/shared/SomeSharedTypes'

但是TS编译器给了我这个错误：

TS6059：文件'/devroot/mainProject/src/shared/SomeSharedTypes.ts'是不在'rootDir''/ devroot / apiProject'下。 “ rootDir”有望包含所有源文件。

Answer 1

我从this Medium article得到的第一个想法是使用TypeScript的non-relative module imports功能。这将允许我这样编写导入文件：

import {SharedType} from '@foo/SomeSharedTypes'

使用本文中介绍的技术，我在paths上添加了tsconfig.json配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@foo/*": ["../mainProject/src/shared/*"],
    },
    "rootDir": "./",
    ...
  }
}

然后，再次按照本文的建议，对于真棒打字机加载程序的用户，我不得不修改我的webpack.config.js以添加解析插件：

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
. . .
  resolve: {
    extensions: ['.js', '.json', '.ts'],
    plugins: [
      new TsConfigPathsPlugin(),
    ],
  }

重要提示：此插件需要进入文件的resolve/plugins部分，而不是根目录级别的“ plugins”部分！如果将解析器插件放在错误的位置，则会出现此错误：

resolver.ensureHook不是函数

以上步骤使我在过程中走得更远-TypeScript现在可以找到我的文件了！

经过更多的Google搜索之后，我发现了一种this StackOverflow answer的解决方案：TS具有rootDirs设置，该设置允许多个根，而不是单个'rootDir' is expected to contain all source files.配置。我从rootDir中删除了rootDir设置，并添加了一个tsconfig.json设置：

rootDirs

接下来，我遇到了我所包含的另一个项目的TypeScript文件的webpack错误：

模块解析失败：意外令牌（3:15）

您可能需要适当的加载器来处理此文件类型。

经过一个小时的故障排除后，我发现我需要将新的共享文件夹告诉webpack加载器。像这样：

"rootDirs": [
  "./",
  "../mainProject",
],

行得通！关于此解决方案的好处是，我可以重构文件夹结构而无需更改源代码。我需要更改的只是const path = require('path'); . . . rules: [ { test: /\.[jt]sx?$/, loader: "awesome-typescript-loader", include: [ __dirname, path.resolve(__dirname, "../mainProject/src/shared/") ], exclude: /node_modules/ },和tsconfig.json。

我当然不熟悉使用webpack和TypeScript，所以可能有比上述解决方案更好的解决方案...但是上述解决方案对我有用！

在此处共享解决方案，以使下一个开发人员更容易找到它。

Answer 2

经过几天的研究，我能够制作简单的打字稿后端服务器（由pm2运行的快速修复）和前端（与webpack捆绑在一起）的工作示例。

在后端和前端，您可以像这样简单地导入任何共享数据：

import { clone, sharedInfo } from '@shared'

这里是link to github example.

项目结构如下：

Answer 3

我强烈建议使用Nx workspace management工具，因为它是专门为解决这类设置问题而构建的。您可以在存储库中简单地创建一个库，然后将该库导入任何地方（请参阅：https://nx.dev/angular/tutorial/08-create-libs）。我和我的团队现在已经严重依赖Nx超过6个月了，无法想象没有它管理TypeScript存储库，请尝试一下！ https://nx.dev

如果不适合使用Nx，则可以对实现的代码共享方式进行建模：

创建一个新文件夹
添加一个index.ts文件，该文件导出应从库外部访问的所有内容
在tsconfig.json-> compilerOptions-> paths内添加一个条目，该条目指向您的图书馆的index.ts
通过您在tsconfig.json内指定的导入名称导入共享代码

使用TypeScript和Webpack在项目之间共享代码

3 个答案: