代码之家 › 专栏 › 技术社区 › Justin Grant

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

awesome-typescript-loader webpack typescript

Justin Grant · 技术社区 · 6 年前

我想在两个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”应为

1 回复 | 直到 6 年前

Justin Grant 6 年前

我的第一个想法是 this Medium article non-relative module imports 功能。这将允许我这样写我的导入:

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.

经过更多的谷歌搜索,我找到了一个解决方案 this StackOverflow answer :而不是单个 rootDir rootDirs 允许多个根的设置。我把衣服脱了设置自并添加了 根目录 设置:

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

接下来,我在包含的另一个项目TypeScript文件上遇到了一个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文件 .

我承认我是新的使用网页和打字,所以可能有一个更好的解决方案比上述一个。。。但是上面的那个对我有用!

在这里共享解决方案,使下一个开发人员更容易找到它。

-1

derbenoo 5 年前

Nx workspace management 工具,因为它是专门用来解决这些设置问题。您只需在存储库中创建一个库,然后就可以在任何地方导入该库(请参阅: https://nx.dev/angular/tutorial/08-create-libs ). 我和我的团队现在已经严重依赖Nx 6个多月了,如果没有它,我无法想象管理TypeScript存储库,试试吧! https://nx.dev

创建新文件夹
添加 index.ts 文件,该文件导出所有应该从库外部访问的内容
在您的 tsconfig.json -&燃气轮机; compilerOptions -&燃气轮机; paths 它指向你的图书馆
通过在中指定的导入名称导入共享代码