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

Question

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

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

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"
  }
}

src/index.tsx

import React, { FC } from 'react'

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

export default Button

Answer 1

我遇到了同样的问题，但我在 Medium 上找到了一个教程，其中解释了如何使用 vite 创建库，我向您展示了避免外部依赖的配置

build: {
  ...
  rollupOptions: {
    external: [
      'react',
      "react/jsx-runtime",
      'react-dom',
    ],
    output: {
      globals: {
        'react': 'react',
        'react-dom': 'ReactDOM',
        'react/jsx-runtime': 'react/jsx-runtime',
      },
    },
  },
},

来自阿根廷的拥抱

Answer 2

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

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

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