Rollup-plugin-typescript2: Multi-build mengacaukan definisi

Sepertinya tsconfig Anda mencakup semua yang ada di bawah yolodev-aspnet-utils/packages/ termasuk dist rupanya jadi kompiler TypeScript menggunakan definisi output dari build sebelumnya sebagai tipe ambient untuk build saat ini -- ini hampir selalu salah.

Plugin ini menghasilkan definisi untuk semua file ts yang dilihat TypeScript selama kompilasi (bukan hanya menghasilkan jenis untuk permintaan rollup file selama build) karena rollup mengabaikan impor hanya tipe. Dalam kasus Anda, Anda melihat efek samping dari itu.

Jika Anda menjalankan tsc di folder tsconfig Anda saat ini, itu akan membangun kedua proyek Anda juga.

Alat apa yang Anda gunakan untuk menghasilkan konfigurasi rollup? Jika memiliki cara untuk meneruskan opsi ke plugin ini, Anda dapat membuat dua tsconfig dengan bagian include/exclude dan meneruskan namanya sebagai parameter tsconfig , atau Anda dapat menggunakan satu tsconfig, tetapi masukkan tsconfigOverride dengan penyertaan yang sesuai.

Masalah yang sama, plugin menghasilkan jalur dts yang salah di lingkungan lerna.
d.ts menghasilkan di packages/*/src/dist/<package.name>/src

Lihat proyek saya https://github.com/zerkalica/zerollup
rollup.config.js

    plugins: [
        typescript({
            abortOnError: true,
            check: true,
            exclude: ['*.spec*', '**/*.spec*'],
            tsconfig: path.join(__dirname, 'tsconfig.json'),
            tsconfigOverride: {
                // compilerOptions: {
                //     rootDir: cwd 
                // },
                include: [
                    __dirname + '/packages/*/src'
                ]
            }
        })
    ],

Dengan rootDir tidak dikomentari, ts menghasilkan kesalahan:

rpt2: options error TS6059 File '/user/projects/zerollup/packages/injector/src/index.ts' is not under 'rootDir' '/user/projects/zerollup/packages/helpers'. 'rootDir' is expected to contain all source files.

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "packages",
        "paths": {
            "@zerollup/*": [ "./*/src" ]
        },
        "allowSyntheticDefaultImports": false,
        "declaration": true,
        "module": "esnext",
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "lib": [
            "dom",
            "esnext"
        ],
        "jsx": "react",
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "alwaysStrict": true,
        "strictNullChecks": false,
        "strictFunctionTypes": true,
        "removeComments": false,
        "experimentalDecorators": true
    },
    "include": [
        "packages/*/src"
    ],
    "exclude": ["node_modules", "**/node_modules/*"]
}

Inferno menggunakan plugin rollup ts2 dan memiliki masalah yang sama dengan jalur: join(__dirname, '../../build/packages/', pkgJSON.name, 'src/index.d.ts')

https://github.com/infernojs/inferno/blob/master/scripts/typings/build.js#L13

Saya berhasil membuatnya bekerja. Sebagai referensi, ini adalah bagian utama dari skrip yang saya gunakan untuk menghasilkan konfigurasi rollup:

import autoExternal from 'rollup-plugin-auto-external';
import fs from 'fs';
import path from 'path';
import { promisify } from 'util';
import typescript from 'rollup-plugin-typescript2';

const readFile = promisify(fs.readFile);

export default async ({ location, main, name }) => {
  const pkg = JSON.parse(
    await readFile(path.resolve(location, 'package.json'), {
      encoding: 'utf-8',
    }),
  );

  return {
    input: path.resolve(location, main),
    output: [
      { format: 'cjs', file: path.resolve(location, 'dist', `${name}.js`) },
      { format: 'es', file: path.resolve(location, 'dist', `${name}.mjs`) },
    ],
    plugins: [
      autoExternal({
        builtins: true,
        dependencies: true,
        packagePath: location,
        peerDependencies: true,
      }),
      typescript({
        tsconfigOverride: {
          compilerOptions: {
            rootDir: path.resolve(location, 'src'),
          },
          include: [path.resolve(location, 'src')],
        },
      }),
    ],
  };
};

Ini tidak berfungsi untuk paket di direktori paket yang bergantung pada paket lain di direktori paket.
di paket repo paket ketergantungan

npm jalankan build.plugin-template

rpt2: options error TS6059 File '/home/user/projects/zerollup/packages/helpers/src/index.ts' is not under 'rootDir' '/home/user/projects/zerollup/packages/plugin-template'. 'rootDir' is expected to contain all source files.

@zerkalica Anda harus menghapus konfigurasi paths , dan mengandalkan resolusi node. Jika Anda memiliki pengaturan lerna yang benar, maka lerna bootstrap akan membuat symlink untuk Anda di bawah proyek. Jadi misalnya, jika Anda memiliki dua modul (A, dan B), dan A bergantung pada B, maka Anda mendapatkan symlink dari packages/a/node_modules/B ke packages/b . Maka Anda hanya perlu mengkonfigurasi typings di packages/b/package.json .

Anda dapat melihat pengaturan saya di sini: https://github.com/YoloDev/aspnet-node-utils

Terima kasih @Alxandr
Sepertinya ada beberapa solusi, tetapi jalur yang diganti dalam konfigurasi rollup berfungsi.
Menghapus jalur dari tsconfig.json merusak resolusi ts pada proyek bersih tanpa pembangunan.

Konfigurasi yang berfungsi:

rollup.config.js

    plugins: [
        typescript({
            abortOnError: true,
            check: true,
            exclude: ['*.spec*', '**/*.spec*'],
            tsconfig: path.join(__dirname, 'tsconfig.json'),
            tsconfigOverride: {
                compilerOptions: {
                    paths: [],
                    rootDir: path.join(cwd, 'src')
                },
                include: [path.join(cwd, 'src')]
            }
        })
    ],

tsconfig.json

{
        "compilerOptions": {
                "baseUrl": "packages",
                "paths": {
                        "@zerollup/*": [ "./*/src" ]
                },
                "allowSyntheticDefaultImports": false,
                "declaration": true,
                "module": "esnext",
                "target": "es5",
                "moduleResolution": "node",
                "sourceMap": true,
                "lib": [
                        "dom",
                        "esnext"
                ],
                "jsx": "react",
                "noImplicitAny": false,
                "noUnusedLocals": true,
                "noImplicitReturns": true,
                "alwaysStrict": true,
                "strictNullChecks": false,
                "strictFunctionTypes": true,
                "removeComments": false,
                "experimentalDecorators": true
        },
        "exclude": ["node_modules", "**/node_modules/*"]
}

@Alxandr @zerkalica sepertinya kalian berdua punya solusi. Sepertinya saya tidak dapat berbuat banyak untuk menangani situasi ini secara otomatis -- informasi struktur proyek tidak tersedia untuk TypeScript sebelum Anda mendefinisikannya dalam penggantian tersebut.

Pilihan lain, mungkin lebih bersih, adalah memiliki tsconfig dasar dan tsconfig individu untuk subproyek (terletak di folder subproyek) yang semuanya memperluas file dasar (lihat opsi extends di tsconfig) dan memberikan nilai include . Kemudian berikan plugin hanya opsi tsconfig dengan jalur file yang benar untuk subproyek yang diberikan.

@ezolenko Ya. Saya mengerti, tetapi saya mencoba membuatnya berfungsi dengan hal-hal minimal yang harus diganti per paket. Juga, saya tidak tahu bahwa itu disebabkan oleh tempat tinggal tsconfig saya, tetapi saya pikir itu disebabkan oleh tempat konfigurasi rollup saya tinggal. Oleh karena itu saya membagi konfigurasi rollup saya menjadi satu per paket, tetapi itu tidak membantu, dan karena itu saya membuat masalah ini. Saya sarankan memiliki beberapa dokumentasi/contoh untuk ini di readme :).

@zerkalica Saya tidak dapat berbicara mengapa Anda tidak membuatnya berfungsi tanpa menjaga jalur, tetapi saya dapat menebak (karena saya tidak memiliki semua info). Seperti yang dikatakan, bagian penting ada di package.json , bukan tsconfig.json . Anda perlu mengatur typings untuk menunjuk ke entri file ts agar berfungsi sebelum membangun. Sekali lagi, Anda dapat melihat ini berfungsi di proyek saya.

[Sunting]
Saya baru menyadari bahwa Anda benar-benar menautkan ke repositori Anda @zerkalica , dan "masalahnya" adalah bahwa pengetikan Anda menunjuk ke file yang dibuat. Yang tidak ada sebelum Anda membangunnya. Di sisi lain, saya memiliki masalah karena saya harus mengirimkan sumber ts (yang mungkin bahkan lebih buruk, dan sesuatu yang sedang saya perbaiki).

@Alxandr
Ya, saya mencoba menggunakan file d.ts bawaan di dist dan tidak menyertakan src ke dalam paket
"types": "dist/index.d.ts",
Dengan menyertakan direktori src, kita dapat sepenuhnya menonaktifkan pembuatan d.ts. Mungkin Anda benar.

@ezolenko Apakah Anda memiliki beberapa contoh, bagaimana melakukannya tanpa menyesuaikan tsconfig.json per setiap paket dalam direktori paket?

@zerkalica Saya belum mencobanya, tetapi saya curiga jika Anda membuat file tsconfig dasar dengan semua opsi menarik di root, kemudian buat tsconfigs per-paket yang extend file dasar tetapi tidak memiliki opsi lain sama sekali, lalu beri tahu plugin jalur ke paket yang diberikan tsconfig dalam opsi tsconfig -- maka semuanya akan berfungsi.

TypeScript akan menggunakan lokasi tsconfig sebagai root sumber Anda dan nilai default untuk includes akan melakukan hal yang benar.

Jika saya tidak salah, itu tidak berhasil. Saat Anda memperluas tsconfig, Anda mendapatkan jalur dasarnya dan menyertakan jalur. Setidaknya itu dulu kasusnya.

@zerkalica Anda menggunakan lerna, kan? Saya mencoba mengatur skrip (menggunakan metode siklus hidup lerna) sehingga ketika paket diterbitkan, itu mengubah nilai types di package.json . Jadi Anda dapat tetap mengarahkannya ke src untuk dev (saya bahkan menggunakannya untuk mendapatkan titik masuk). Kemudian, tepat sebelum menyebarkan, itu diubah untuk menunjuk ke dist . Saya pikir ini mungkin cara untuk pergi.

Jika tsconfig turunan mewarisi includes default, maka Anda mungkin perlu menyediakan includes dalam file turunan (mereka menggantikan yang dari basis). Jika struktur proyek serupa, itu bisa menjadi nilai yang sama di semua salinan file turunan. Ini hanya perbedaan kosmetik vs menggunakan override meskipun berhasil.

Saya mencoba menggunakan tsconfig.json terpisah per proyek ( lerna demo project ). Dan menemukan bug dengan beberapa contoh plugin ts dan file deklarasi. Gunakan npm run bug untuk membangun dengan rollup.config.js.

rollup.config.js

import * as path from 'path'
import typescript from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve'
import replace from 'rollup-plugin-replace'
import commonjs from 'rollup-plugin-commonjs'

const pkgRoot = path.join(__dirname, 'packages')

export default [
    {
        input: path.join(pkgRoot, 'lib1', 'src', 'index.ts'),
        output: {
            format: 'es',
            file: path.join(pkgRoot, 'lib1', 'dist', 'index.mjs')
        },
        plugins: [
            resolve(),
            commonjs(),
            typescript({
                // verbosity: 3,
                tsconfig: path.join(pkgRoot, 'lib1', 'tsconfig.json')
            })
        ]
    },
    {
        input: path.join(pkgRoot, 'lib2', 'src', 'index.ts'),
        output: {
            format: 'es',
            file: path.join(pkgRoot, 'lib2', 'dist', 'index.mjs')
        },
        plugins: [
            resolve(),
            commonjs(),
            typescript({
                // verbosity: 3,
                tsconfig: path.join(pkgRoot, 'lib2', 'tsconfig.json')
            })
        ]
    }
]

ls packages/lib1/dist
index.d.ts  index.mjs  some

ls packages/lib2/dist
index.mjs  lib2

ls packages/lib2/dist/lib2/src
index.d.ts  some.d.ts

paket/lib2/tsconfig.json

{
        "extends": "../../tsconfig.json",
        "compilerOptions": {
                "paths": {
                        "~/*": ["lib1/src/*"],
                        "zerollup-demo-lib1/*": ["lib1/src/*"],
                        "zerollup-demo-*": ["*/src"]
                }
        }
}

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "packages",
        "newLine": "LF",
        "allowSyntheticDefaultImports": false,
        "module": "esnext",
        "target": "es5",
                "declaration": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "lib": [
            "dom",
            "esnext"
        ],
        "jsx": "react",
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "alwaysStrict": true,
        "strictNullChecks": false,
        "strictFunctionTypes": true,
        "removeComments": false,
        "experimentalDecorators": true
    }
}

@zerkalica ada bug? Hanya memiliki tsconfig tidak membuat jalur root proyek itu. Jika Anda mewarisi dari tsconfig lain, dan tidak menimpa jalur dasar atau menyertakannya, itu akan mendapatkannya dari jalur induk.

Apakah ini berfungsi jika Anda menambahkan opsi include di semua tsconfig turunan?

@Alxandr Apa maksudmu? baseUrl menyelesaikan tsconfig.json utama relatif. konfigurasi lib1 dan lib2 mewarisi baseUrl yang diselesaikan dan TypeScript di vscode berfungsi dengan baik dengan alias ini.

Saya mencoba ini, tetapi ini tidak membantu:

paket/lib1/tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "rootDir": ".",
        "paths": {
            "~/*": ["lib1/src/*"],
            "zerollup-demo-lib1/*": ["lib1/src/*"],
            "zerollup-demo-*": ["*/src"]
        }
    }
}

paket/lib2/tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "rootDir": ".",
        "paths": {
            "~/*": ["lib2/src/*"],
            "zerollup-demo-lib2/*": ["lib2/src/*"],
            "zerollup-demo-*": ["*/src"]
        }
    }
}

@ezolenko
Apa yang perlu saya sertakan? Ini tidak berfungsi:

paket/lib1/tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "paths": {
            "~/*": ["lib1/src/*"],
            "zerollup-demo-lib1/*": ["lib1/src/*"],
            "zerollup-demo-*": ["*/src"]
        }
    },
        "include": [
          "./src"
        ]
}

paket/lib2/tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "paths": {
            "~/*": ["lib2/src/*"],
            "zerollup-demo-lib2/*": ["lib2/src/*"],
            "zerollup-demo-*": ["*/src"]
        }
    },
        "include": [
          "./src",
          "../lib1/src"
        ]
}

ls packages/lib1/dist
index.mjs

ls packages/lib2/dist
index.mjs  lib1  lib2

Setelah penyelidikan, saya pikir, menghasilkan d.ts per paket adalah ide yang buruk. Jalur Tilda tidak berfungsi dengan benar di vscode, pengaturan yang terlalu rumit (pengaturan plugin alias, termasuk, tidak termasuk, rootDir di tsconfig.json per setiap paket), terlalu banyak peringatan ( alias plugin tidak berfungsi untuk file indeks ) dan boilerplate.

Solusi terbersih - adalah sepenuhnya menonaktifkan generasi d.ts, menambahkan direktori src ke dalam paket dan mengatur direktori pengetikan di package.json ke src.

Solusi yang diretas - gunakan dua instance ts-plugin: instance pertama di blok konfigurasi rollup pertama menghasilkan d.ts untuk semua paket di direktori temporal declarationDir, instance kedua di blok konfigurasi rollup lain dengan deklarasi yang dinonaktifkan. Solusi ini membutuhkan sebuah plugin, yang salinannya dihasilkan di temp dir d.ts ke package/*/dist/typings.

#### rollup.config.js

import * as path from 'path'
import typescript from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve'
import replace from 'rollup-plugin-replace'
import commonjs from 'rollup-plugin-commonjs'
import * as fsExtra from 'fs-extra'

const pkgRoot = path.join(__dirname, 'packages')

const tsPlugin = typescript({
    tsconfig: path.join(__dirname, 'tsconfig.json'),
    useTsconfigDeclarationDir: true,
    tsconfigOverride: {
        compilerOptions: {
            declaration: true,
            declarationDir: path.join(__dirname, 'dist')
        }
    }
})

const tsPlugin2 = typescript({
    tsconfig: path.join(__dirname, 'tsconfig.json')
})

function moveDeclarations({declarationDir, packagesDir}) {
    return {
        name: 'move-ts-declarations',
        onwrite() {
            return fsExtra.readdir(declarationDir)
                .then(dirs => Promise.all(dirs.map(dir =>
                    fsExtra.ensureDir(path.join(packagesDir, dir, 'dist'))
                        .then(() =>
                            fsExtra.move(
                                path.join(declarationDir, dir, 'src'),
                                path.join(packagesDir, dir, 'dist', 'typings'),
                                {overwrite: true}
                            )
                        )
                )))
                .then(() => fsExtra.remove(declarationDir))
        }
    }
}


export default [
    {
        input: path.join(pkgRoot, 'lib1', 'src', 'index.ts'),
        output: {
            format: 'es',
            file: path.join(pkgRoot, 'lib1', 'dist', 'index.mjs')
        },
        plugins: [
            resolve(),
            commonjs(),
            tsPlugin,
            moveDeclarations({
                declarationDir: path.join(__dirname, 'dist'),
                packagesDir: path.join(__dirname, 'packages')
            })
        ]
    },
    {
        input: path.join(pkgRoot, 'lib2', 'src', 'index.ts'),
        output: {
            format: 'es',
            file: path.join(pkgRoot, 'lib2', 'dist', 'index.mjs')
        },
        plugins: [
            resolve(),
            commonjs(),
            tsPlugin2
        ]
    }
]

PS: Saya menemukan solusi lain. @Alxandr benar tentang rootDir dan sertakan. Masalah di jalur.
"zerollup-demo-*": ["*/src"] diperlukan untuk ide, tetapi tidak diperlukan untuk build.

#### bagian rollup.config.js

            typescript({
                tsconfig: path.join(__dirname, 'tsconfig.base.json'),
                useTsconfigDeclarationDir: true,
                tsconfigOverride: {
                    compilerOptions: {
                        declaration: true,
                        rootDir: path.join(pkgRoot, 'lib2', 'src'),
                        declarationDir: path.join(pkgRoot, 'lib2', 'dist', 'typings')
                    },
                    include: [path.join(pkgRoot, 'lib2', 'src')]
                }
            })

{
    "compilerOptions": {
        "baseUrl": "packages",
        "paths": {
            "zerollup-demo-lib1/*": ["lib1/src/*"],
            "zerollup-demo-lib2/*": ["lib2/src/*"],
            "zerollup-demo-site1/*": ["site1/src/*"]
        },
        "newLine": "LF",
        "allowSyntheticDefaultImports": false,
        "module": "esnext",
        "target": "es5",
        "moduleResolution": "node",
        "sourceMap": true,
        "lib": [
            "dom",
            "esnext"
        ],
        "jsx": "react",
        "noImplicitAny": false,
        "noUnusedLocals": true,
        "noImplicitReturns": true,
        "alwaysStrict": true,
        "strictNullChecks": false,
        "strictFunctionTypes": true,
        "removeComments": false,
        "experimentalDecorators": true
    },
        "exclude": ["dist", "node_modules"],
        "include": ["packages/*/src"]
}

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
        "paths": {
            "zerollup-demo-lib1/*": ["lib1/src/*"],
            "zerollup-demo-lib2/*": ["lib2/src/*"],
            "zerollup-demo-site1/*": ["site1/src/*"],
            "zerollup-demo-*": ["*/src"]
        }
    }
}

@ezolenko Anda menggunakan deep merge untuk "paths" di tsconfigOverride. Dengan penggabungan dalam, saya tidak dapat menghapus beberapa kunci jalur atau mengganti seluruh jalur dari konfigurasi yang diwarisi. tsc menggunakan penggabungan dangkal untuk itu.

Cleanest solution - is a completly disable d.ts generation, add src directory into package and set typings directory in package.json to src.

Menerbitkan file sumber alih-alih deklarasi tipe hampir selalu merupakan ide yang buruk. Anda akan mengalami masalah pengetikan ketika pengguna akan mencoba menggunakan perpustakaan Anda, terutama jika mereka memiliki versi TypeScript yang lebih lama atau jika mereka tsconfig dikonfigurasi secara berbeda.

Sekedar berbagi pengalaman. Kami juga memiliki pengaturan monorepo menggunakan Rush (alternatif Lerna yang lebih baik) dan kami memiliki masalah dengan jalur pembuatan deklarasi tipe. Masalahnya adalah kami menggunakan alat bawaan kami sendiri, yang merangkum Rollup dan semua konfigurasi (saya sangat merekomendasikan pendekatan ini).

Kami telah berhasil mencapai hasil yang diinginkan menggunakan konfigurasi ini:

const entryFilePath = `${projectPath}/index.ts`;

const typeScriptPluginOptions: any = {
  tsconfig: `${builderPath}/config/tsconfig.json`, // using one base tsconfig for all packages
  tsconfigOverride: {
    compilerOptions: <CompilerOptions> {
      rootDir: projectPath,
      typeRoots: [
        `${projectPath}/node_modules/@types`,
        `${projectPath}/types`,
      ],
    },
  },
  clean: isProduction,
  verbosity: (isDebug ? 3 : 1),
  cacheRoot: `${projectPath}/node_modules/.cache/rollup-plugin-typescript2`,
  typescript: TypeScript,
};


// THIS IS THE IMPORTANT PART:
// Setting the paths manually to override default paths set by the plugin
Object.assign(typeScriptPluginOptions.tsconfigOverride, {
  files: [entryFilePath],
  include: [
    `${projectPath}/*.ts`,
    `${projectPath}/src/**/*.ts`,
    `${projectPath}/src/**/*.tsx`,
  ],
  exclude: [],
});

if (declarations) {

  Object.assign(typeScriptPluginOptions.tsconfigOverride.compilerOptions, <CompilerOptions> {
    declaration: true,
    declarationDir: outputPath,
  });

  // Preventing plugin from overwriting the "declarationDir" option
  typeScriptPluginOptions.useTsconfigDeclarationDir = true;

}