如何获取rollup以在其转译(TypeScript)中包含lerna monorepo中另一个包的依赖项?

hfyxw5xn  于 2023-05-30  发布在  TypeScript
关注(0)|答案(3)|浏览(154)

我创建了一个最小的例子来展示我的问题:Github repo
我有一个lerna monorepo,在packages文件夹中有两个npm包,这些包被称为:

utils:导出一个函数:

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

组件库::导出一个简单的函数式React组件:

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

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

monorepo的根目录有一个tsconfig.json,它定义了一个paths键,用于将任何形式为@project/*的导入Map到包。

{
  "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,解析从utilsutils源代码的导入,而不是node_modules中符号链接包中的构建文件夹(即,不使用lerna创建的符号链接)。
我几乎实现了这一点,除了当我在component-library中运行构建脚本时,我得到一个错误:
src/index.tsx → ./build...[!]错误:意外的token(注意你需要插件来导入不是JavaScript的文件)..\utils\src\index.ts(1:21)1:export const add =(a:number,b:数)=> a + b
我理解这一点的方式,这意味着导入的解析工作正常,但汇总并没有转译来自外部依赖项的TS文件。

如何告诉rollup将utils中的文件包含在通过rollup的转译中?

s4n0splo

s4n0splo1#

如果这真的是问题所在
我理解这一点的方式,这意味着导入的解析工作正常,但汇总并没有转译来自外部依赖项的TS文件。
您可以从@rollup/plugin-babel运行Babel并直接使用Babel转译ts文件。Babel将检查node_modules中的文件。

rbpvctlc

rbpvctlc2#

对于monorepo,许多(如果不是所有)包裹将被吊起。所以把分辨率调高。尝试使用nodeResolve选项:

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

9cbw7uwe3#

我能够使用@rollup/plugin-node-resolverollup-plugin-typescript2构建一个像你描述的工作的monorepo。组件库只提供可以使用npm安装的react组件。我使用esm作为输出类型,并省略了插件中的commonjs()步骤。
插件部分看起来像这样:

plugins: [
  resolve(),
  typescript({ tsconfig: "./tsconfig.json" }),
],

相关问题