javascript - Hur får man rollup att inkludera ett beroende från ett annat paket i ett lerna-monorepo i dess transpilering (TypeScript)?

Jag skapade ett minimalt exempel för att visa den fråga jag har: Github-repo.

Jag har ett lerna-monorepo med två npm-paket i packages-mappen, paketen kallas:

utils: exporterar en funktion:

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

component-library:: exporterar en enkel funktionell React-komponent:

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

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

Roten av monorepot har en tsconfig.json, som definierar en paths-nyckel för att mappa alla importer av formen @project/* till paketen.

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

Varje paket har en rollup.config.js, båda i princip identiska (även om vi här bara kommer att använda den i component-library-paketet):

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'}),
    ]
};

Därför använder de båda de sökvägar som definieras i roten tsconfig.json, och de använder ett plugin för att transpile Typescript.

component-library importerar en funktion från @project/utils kallad add(a,b).

Mitt mål är att skapa en build av detta bibliotek (använder rollup), utan att först behöva bygga utils-paketet. Med andra ord vill jag bygga component-library och lösa importer från utils till källkoden i utils, inte build-mappen i det länkade paketet i node_modules (dvs. inte använda de symlänkar som skapats av lerna).

Jag lyckas nästan med detta, förutom att när jag kör byggskriptet i component-library får jag ett fel:

src/index.tsx → ./build... [!] Fel: Ov väntat tecken (Observera att du behöver plugins för att importera filer som inte är JavaScript) ..\utils\src\index.ts (1:21) 1: export const add=(a:number, b: number) => a + b ^

Som jag förstår det betyder det att upplösningen av importen fungerar bra, men rollup transpilerar inte TS-filen som kommer från ett externt beroende.

Hur säger jag till rollup att inkludera filen från utils i transpileringen via rollup?

Svar #1

Om det här verkligen är problemet

Som jag förstår det betyder det att upplösningen av importen fungerar bra, men rollup transpilerar inte TS-filen som kommer från ett externt beroende.

Du kan köra Babel från @rollup/plugin-babel och transpile ts-filer med Babel direkt. Babel kommer att gå igenom filer i node_modules.

Svar #2

Jag har projektet (lerna + rollup) och gör följande inställningar för typning:

  • min rollup-konfiguration ser ut så här

import {defineConfig} from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import {terser} from 'rollup-plugin-terser';
import url from '@rollup/plugin-url';

import * as fs from 'fs';
import path from 'path';

const PACKAGE_NAME = process.cwd();
const packageJson = JSON.parse(fs.readFileSync(path.join(PACKAGE_NAME, 'package.json'), 'utf-8'));

const includePaths = ['**/*.woff', '**/*.woff2', '**/*.svg', '**/*.png'];

export default defineConfig({
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: false,
      name: packageJson.name,
    },
    {
      file: packageJson.module,
      format: 'es',
      sourcemap: false,
      name: packageJson.name,
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({tsconfig: './tsconfig.json'}),
    terser(),
    url({
      fileName: '[name][extname]',
      include: includePaths,
      limit: 0,
    }),
  ],
  external: [...Object.keys(packageJson.peerDependencies || {})],
});```
  • tsconfig.json ser ut så här

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "outDir": "dist",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "downlevelIteration": true,
    "jsx": "react-jsx",
    "noFallthroughCasesInSwitch": true,
    "declaration": true,
    "declarationDir": ".",
    "emitDeclarationOnly": true
  },
  "include": ["rollup.config.ts"],
  "exclude": ["node_modules", "dist", "src/**/*.test.tsx", "src/**/*.stories.tsx"]
}

Det är också viktigt att lägga till inställningar (module, exports, types) för typer i filen package.json, till exempel inställningar för något npm-paket:

{
  "name": "@portfolio-yues-it-npm/icons",
  "main": "./dist/cjs/index.js",
  "module": "./dist/es/index.js",
  "exports": {
    "types": "./dist/es/index.d.ts",
    "import": "./dist/es/index.js",
    "default": "./dist/cjs/index.js"
  },
  "types": "./dist/es/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup --config ../../rollup.config.ts --configPlugin @rollup/plugin-typescript"
  },
  "devDependencies": {
    ...
  }
}

P.S. Kanske detta hjälper dig, jag skrev en artikel om lerna + rollup-inställningar

Relaterade artiklar