我创建了一个最小的例子来展示我的问题: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
,解析从utils
到utils
源代码的导入,而不是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的转译中?
3条答案
按热度按时间s4n0splo1#
如果这真的是问题所在
我理解这一点的方式,这意味着导入的解析工作正常,但汇总并没有转译来自外部依赖项的TS文件。
您可以从
@rollup/plugin-babel
运行Babel并直接使用Babel转译ts文件。Babel将检查node_modules
中的文件。rbpvctlc2#
对于monorepo,许多(如果不是所有)包裹将被吊起。所以把分辨率调高。尝试使用nodeResolve选项:
9cbw7uwe3#
我能够使用
@rollup/plugin-node-resolve
和rollup-plugin-typescript2
构建一个像你描述的工作的monorepo。组件库只提供可以使用npm安装的react组件。我使用esm作为输出类型,并省略了插件中的commonjs()步骤。插件部分看起来像这样: