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

【问题标题】：How to get rollup to include a dependency from another package in a lerna monorepo in its transpilation (TypeScript)?如何汇总以在其转译（TypeScript）中包含来自另一个包的依赖项？
【发布时间】：2020-03-17 19:45:25
【问题描述】：

我创建了一个最小示例来显示我的问题：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'}),
    ]
};

因此，它们都使用根 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... [!] 错误：意外的令牌（请注意，您需要插件来导入不是 JavaScript 的文件） ..\utils\src\index.ts (1:21) 1: export const add = (a:number, b: 数字）=> a + b ^

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

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

【问题讨论】：

嘿，你有想过这个吗？
类似stackoverflow.com/questions/66784292/…
你修复了这个@evianpring 吗？
一件小事，但是看看你的 Rollup 设置并与我的比较，有一个东西不见了。我把nodeResolve({ extensions, }),放在前面，在plugins[]里面，在commonjs(),上面。 extensions 是一个类似const extensions = [".js", ".json", ".node", ".ts", ".tsx"]; 的字符串数组。试试这个。导入为import { nodeResolve } from "@rollup/plugin-node-resolve";。

标签： javascript typescript rollup lerna

【解决方案1】：

如果这真的是问题

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

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

【讨论】：

【解决方案2】：

对于 monorepo，许多（如果不是全部）包将被吊起。所以让决心看起来更高。尝试使用 nodeResolve 选项：

{
    rootDir: path.join(process.cwd(), '..')
}

【讨论】：