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


Sharing code between projects using TypeScript and webpack

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

1
2
3
4
5
6
7
8
9
10
11
/devroot/
  mainProject/
    tsconfig.json
    src/
      shared/
        SomeSharedTypes.ts
  apiProject/
    tsconfig.json
    webpack.config.js
    src/
      UseSomeSharedType.ts

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

我尝试了一个显而易见的解决方案，如下所示：

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

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

TS6059: File '/devroot/mainProject/src/shared/SomeSharedTypes.ts' is
not under 'rootDir' '/devroot/apiProject'. 'rootDir' is expected to
contain all source files.

我从这篇中型文章中得到的第一个想法是使用TypeScript的非相对模块导入功能。这将允许我这样编写导入：

1
import {SharedType} from '@foo/SomeSharedTypes'

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

1
2
3
4
5
6
7
8
9
10
{
 "compilerOptions": {
   "baseUrl":".",
   "paths": {
     "@foo/*": ["../mainProject/src/shared/*"],
    },
   "rootDir":"./",
    ...
  }
}

然后，再次按照本文的建议，对于awesome-typescript-loader的用户，我不得不修改我的webpack.config.js以添加一个解析插件：

1
2
3
4
5
6
7
8
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
. . .
  resolve: {
    extensions: ['.js', '.json', '.ts'],
    plugins: [
      new TsConfigPathsPlugin(),
    ],
  }

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

resolver.ensureHook is not a function

上面的步骤使我进一步前进-TypeScript现在可以找到我的文件了！-但是在webpack的执行中，我仍然遇到相同的错误：'rootDir' is expected to contain all source files.

经过更多的Google搜索之后，我在此StackOverflow答案中找到了一个解决方案：TS具有一个rootDirs设置，该设置允许多个根，而不是单个rootDir配置。我从tsconfig.json中删除了rootDir设置，并添加了rootDirs设置：

1
2
3
4
"rootDirs": [
 "./",
 "../mainProject",
],

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

Module parse failed: Unexpected token (3:15)

You may need an appropriate loader to handle this file type.

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

1
2
3
4
5
6
7
8
9
10
11
12
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.config.js。

我承认使用webpack和TypeScript是新手，因此可能有比上述解决方案更好的解决方案...但是上述解决方案对我有用！

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

相关讨论