如何让汇总以在 lerna monorepo 的转译（TypeScript）中包含来自另一个包的依赖项？

Question

我创建了一个最小示例来展示我的问题：Github repo。

我有一个 lerna monorepo，packages文件夹中有两个 npm 包，这些包被称为：

utils : 导出一个函数：

export const add = (a:number, b: number) => a + b

component-library::导出一个简单的函数式 React 组件：

import React from 'react';
import { add } from '@project/utils';

export const MyComponent = () => <div>{add(2, 2)}</div>;

monorepo 的根有一个tsconfig.json，它定义了一个paths键来将表单的任何导入映射@project/*到包。

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@project/*": ["packages/*/src"]
    }
  },
  "exclude": ["**/build/**"]
}

每个包都有一个rollup.config.js，两者本质上是相同的（尽管我们在这里只使用component-library包中的一个）：

import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';

export default {
    input: 'src/index.tsx',
    output: {
        dir: './build',
        format: 'cjs'
    },
    plugins: [
        commonjs(),
        typescript({ tsconfig: '../../tsconfig.json'}),
    ]
};

因此，它们都使用在 root 中定义的路径tsconfig.json，并且使用插件来转换 Typescript。

component-library从@project/utils被调用的函数中导入一个函数add(a,b)。

我的目标是创建此库的构建（使用rollup），而不必先构建utils包。换句话说，我想component-library从utils的源代码构建解析导入，而不是符号链接utils包中的构建文件夹node_modules（即，不使用由 lerna 创建的符号链接）。

我几乎实现了这一点，除了在 中运行构建脚本时component-library，出现错误：

src/index.tsx ？./build... [!] Error: Unexpected token (注意你需要插件来导入非 JavaScript 的文件) ..\utils\src\index.ts (1:21) 1: export const add = (a :number, b: number) => a + b ^

我理解这一点的方式，这意味着导入的分辨率工作正常，但汇总不会转译来自外部依赖项的 TS 文件。

我如何告诉 rollup 将来自 utils 的文件包含在通过 rollup 的转译中？

Answer 1

如果这确实是问题所在

我的理解是，这意味着导入的解析工作正常，但汇总不会转译来自外部依赖项的 TS 文件。

您可以直接使用 Babel 运行 Babel@rollup/plugin-babel并转译 ts 文件。Babel 将检查node_modules.