如何汇总以在其编译（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 文件。您可以@rollup/plugin-babel直接从 Babel 运行 Babel 并使用 Babel 转译 ts 文件。Babel 将遍历node_modules.

Answer 2

对于 monorepo，许多（如果不是全部）包将被吊起。所以让决心看起来更高。尝试使用 nodeResolve 选项：{&nbsp; &nbsp; rootDir: path.join(process.cwd(), '..')}