使用 Webpack + Typescript 的多项目依赖项

Question

我管理多个项目，其中一些相互依赖。

每个项目都使用 typescript 编写并使用 webpack 构建。

现在这是我的树

• 根
  • tsconfig.json
  • 核心
    • 分布
    • webpack.config.js
    • tsconfig.json（扩展根 tsconfig）
    • 源
      • js
        • core.ts
  • 项目1
    • 分布
    • webpack.config.js
    • tsconfig.json（扩展根 tsconfig）
    • 源
      • js
        • project1.ts（依赖于 core.ts 或 core.d.ts）

core.ts

 export class Core {
     constructor() {

    }
 }

project1.ts

 import {Core} from "../../../core/src/js/core";


 class Project1 {
     constructor() {
        let test = new Core()
    }
 }

如果我从/project1 运行tsc，构建将按预期工作。 但是如果我使用 webpack 和 ts-loader 会报错

Module not found: Error: Can't resolve ...

我的规则来自：/project1/webpack.config.js

{
    test: /\.tsx?$/,
    use: [{loader:  'ts-loader', options: {configFile: "tsconfig.json"}}],
    exclude: /node_modules/,
},

我尝试添加别名但没有成功

resolve: {
    alias: {
        Core : path.resolve(__dirname, "../core")

    }
},

所以我猜如果 webpack 是从子文件夹中获取的，那么它是无法跳转到 root 的吗？

我尝试拥有这棵树，因为我希望每个项目都可以单独包含在 html 中

core.js 和自定义项目*.js

我可以有 30 个不同的项目，所以我想单独加载 core.js 以保持浏览器缓存的好处。

只需使用Core的类型或重用核心组件中的方法，就可以在每个项目中保持类型的好处。

我想我可以用 Core 制作一个包，然后在每个项目中导入，但是为了更新每个项目，我还有很多工作要做，只是为了做一点小改动。也可以与 tsc 一起使用，也许它可以与 webpack 一起使用，因为它使用 tsconfig.json。

欢迎提出任何想法。

Answer 1

我写layer-pack解决了这类问题

这个插件允许你“继承”一些核心项目，包括 webpack 配置。

它带有 es6 glob 解析等助手：)

你会发现不同的例子可以做到这一点here

我在大型项目中积极使用它，所以它非常稳定

希望它能满足您的需求:)