将 Rollup、ES 模块、TypeScript 和 JSX 连接在一起时的混淆行为

Question

我在标题中提到的东西 - 我最近才开始学习它们。他们不会那么顺利，所以我不得不在 Whosebug 上问这个小问题。

我需要什么

收拾我的东西 - 来了 Rollup
为我自己的模块文件导入裸模块 - 为此使用 @rollup/plugin-node-resolve
有趣的打字语言 - TypeScript 和 @rollup/plugin-typescript
React with JSX - 它是 react 和 react-dom 包，以及 typescript，它能够处理 JSX

我阅读了这些文档以将这些工具连接在一起：

我成功使用了Rollup、@rollup/plugin-node-resolve和TypeScript。但是随着 React 的加入，事情变得奇怪了。

演示项目

请看我做的示例工程：
https://github.com/Ser5/RollupWireBug

git clone https://github.com/Ser5/RollupWireBug.git
cd RollupWireBug/
npm install or yarn install
npm run build

项目结构为：

/
    src/
        js/ - only folder that contains my code
            main.tsx - entry point
            test-class.js - for testing bare import
        buggy.tsx - should be excluded from building
    dist/
        bundle.js - Rollup output file

rollup.config.js

根据我的理解，配置应该像这样工作：

resolve({
    moduleDirectories: ['node_modules/', 'src/js/'],
    extensions:        ['.js', '.ts', '.jsx', '.tsx'],
}),

^ 这应该意味着从 node_modules/ 和 src/js/ 中裸导入模块，搜索具有指定扩展名的文件。

令人费解的部分来了：

typescript({
    include: [
        './**/*',
        //'src/js/**/*',
        //"node_modules/**/*",
    ],
    exclude: [
        "node_modules/",
        "dist/",
        "src/buggy.tsx",
    ],
}),

^ 这就是我的配置方式。我必须在 include 中写 ./**/* - 这对我来说似乎很奇怪，因为我相信我不需要包含项目根目录中的每个文件 - 我只需要 src/js/.

如果我使用 src/js/**/* 而不是 ./**/*，或者 src/js/**/* 和 node_modules/**/* - Rollup 拒绝构建项目，尖叫：

src/js/main.tsx → dist/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\js\main.tsx (7:13)
5:
6: let myName = 'Ser5';
7: let s      = <h1>{myName}</h1>;
                ^
8: console.log(s);
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)

它无法识别 JSX 语法。

因为 include 中的 ./**/* 我还需要 exclude 部分 - 否则 Rollup/TypeScript 将爬入 src/buggy.js 甚至 dist/，并尝试构建它们。

tsconfig.json

我的理解是这样的：

"baseUrl": "./",
"paths": {
    "*": [
        "node_modules/*",
        "src/js/*",
    ],
},

^“在 node_modules/ 和 src/js/ 目录中搜索模块。”

"outDir": "tsout",

^ 真的不知道这是什么鬼。看起来像一些临时文件夹。

如果在 rollup.config.js

中代替这部分

typescript({
    include: [
        './**/*',
    ],
    ...
}),

我在tsconfig.json

中写了同样的东西

{
    include: [
        './**/*',
    ],
    "compilerOptions": {
        ...

项目仍未生成 - 显示 Error: Unexpected token 的 JSX 语法。

问题

我哪里错了？
为什么 @rollup/plugin-typescript 我必须从根开始包含 ./**/*，并用 include 部分阻止一些文件？为什么我不能简单地写 src/js/**/* ?
为什么 include 只适用于 @rollup/plugin-typescript？我不能在 tsconfig.json?

include

Answer 1

会尽量给你一些提示：

outDir 选项表示 JavaScript 文件将在何处生成
@rollup/plugin-typescript 将从 tsconfig.json 文件加载任何 compilerOptions。因此，如果您将任何选项传递给它（就像您在回购中所做的那样），它将覆盖您在 tsconfig.json 中设置的那些选项。可能更好地决定在哪里配置 TS
专门针对你的错误。 See docs here.

基本上你必须这样做：

import jsx from 'acorn-jsx';
import typescript from '@rollup/plugin-typescript';

export default {
  // … other options …
  acornInjectPlugins: [jsx()],
  plugins: [typescript({ jsx: 'preserve' })]
};

如果您想避免所有这些配置恶作剧，请顺便检查一下 Vite！ :)

将 Rollup、ES 模块、TypeScript 和 JSX 连接在一起时的混淆行为

Confusing behavior when wiring together Rollup, ES modules, TypeScript, and JSX

javascript

node.js

typescript

reactjs

rollupjs

我需要什么

演示项目

rollup.config.js

tsconfig.json

问题