为什么 Vite/TS 捆绑了 react-jsx-runtime 的生产版本和开发版本？答案

【问题标题】：Why is Vite/TS bundling both production and development versions of react-jsx-runtime?为什么 Vite/TS 捆绑了 react-jsx-runtime 的生产版本和开发版本？
【发布时间】：2023-01-31 19:11:50
【问题描述】：

我在我的 tsconfig 文件中使用 "jsx": "react-jsx", 并使用 Vite/rollup 进行捆绑。出于某种原因，我的模块总是与 react-jsx-runtime.production.min.js 和 react-jsx-runtime.development.js 捆绑在一起，即使 NODE_ENV 设置为生产。我只希望包含生产代码。

我可以通过在汇总选项中将 'react/jsx-runtime' 设置为外部来删除两者，但这也不是我想要的产品包。我找不到解释这一点的文档。有谁知道如何阻止捆绑器包含开发运行时？

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  build: {
    lib: {
      entry: './src/index.tsx',
      formats: ['es'],
      name: `button`,
      fileName: `button`,
    },
    rollupOptions: {
      external:  ['react'],
    },
  },
  plugins: [react()],
})

tsconfig.json文件

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json文件

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

包.json

{
  "name": "button",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "build": "cross-env NODE_ENV=production vite build && npx tsc"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  }
}

源代码/index.tsx

import React, { FC } from 'react'

export const Button: FC<any> = ({
  children
}) => (
  <button>{children}</button>
)

export default Button

【问题讨论】：

标签： reactjs typescript vite rollup

【解决方案1】：

我遇到了同样的问题，我通过选择退出自动 JSX 运行时解决了这个问题。

react({
  jsxRuntime: 'classic',
})

这将禁用自动 JSX 运行时，并且输出的大小将减少。

来源：https://www.npmjs.com/package/@vitejs/plugin-react

【讨论】：

听起来可能是个错误？
谢谢，我试过这个选项，但它完全停止了运行时的捆绑。我确实（只）想要生产运行时。对我来说，问题是运行时的开发版本和生产版本都捆绑在一起。我只想要一个或另一个，在这种情况下是生产一个。

【解决方案2】：

这将去除开发运行时，但这都是学术性的，因为这可能不是捆绑库的正确方法。

export default defineConfig((env) => ({
  define: env.command === 'build' ? { "process.env.NODE_ENV":  "'production'" } : undefined,
...

经过反思，将 react/jsx-runtime 添加到外部汇总选项更有意义，或者按照@Danielo Velasquez 的建议使用选择退出

【讨论】：