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

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

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

import {SharedType} from '@foo/SomeSharedTypes'

使用本文中描述的技术,我向我添加了一个paths配置tsconfig.json:

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

然后,再次如文章所建议的那样,对于awesome-typescript-loader的用户,我不得不修改我webpack.config.js的添加分辨率插件:

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

重要提示:此插件需要进入resolve/plugins文件的部分,而不是根级" plugins"部分!如果您将解析器插件放在错误的位置,您将收到此错误:

resolver.ensureHook不是一个函数

上面的步骤让我在这个过程中更进一步 - TypeScript现在能够找到我的文件了! - 但是我在webpack的执行后面仍然遇到了同样的错误: 'rootDir' is expected to contain all source files.

经过更多的谷歌搜索,我在这个StackOverflow答案中找到了一个解决方案:rootDirTS具有rootDirs允许多个根的设置,而不是单个配置.我删除了我的rootDir设置tsconfig.json并添加了一个rootDirs设置:

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

接下来,我遇到了包含的其他项目TypeScript文件的webpack错误:

模块解析失败:意外的令牌(3:15)

您可能需要适当的加载程序来处理此文件类型.

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

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,所以可能有一个比上面更好的解决方案......但上面的一个对我有用!

在此共享解决方案,以便下一个开发人员更容易找到它.