将 Rollup、ES 模块、TypeScript 和 JSX 连接在一起时的令人困惑的行为

Posted 2023-02-19

【中文标题】将 Rollup、ES 模块、TypeScript 和 JSX 连接在一起时的令人困惑的行为

【英文标题】：Confusing behavior when wiring together Rollup, ES modules, TypeScript, and JSX

【发布时间】：2021-04-28 11:24:03

【问题描述】：

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

我需要什么

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

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

https://www.typescriptlang.org/tsconfig https://www.npmjs.com/package/@rollup/plugin-typescript

我成功使用了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",

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

如果不是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？

【参考方案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！ :)