reactjs 为什么Vite/TS捆绑react-jsx-runtime的生产和开发版本?

w6lpcovy  于 2023-01-30  发布在  React
关注(0)|答案(1)|浏览(231)

我在我的tsconfig文件中使用"jsx": "react-jsx",,并使用Vite/rollup进行绑定。由于某种原因,我的模块总是与react-jsx-runtime.production.min.jsreact-jsx-runtime.development.js绑定,即使NODE_ENV设置为生产。我只希望包括生产代码。
我可以通过在汇总选项中将'react/jsx-runtime'设置为external来删除这两个选项,但这也不是我想要的产品捆绑包。我找不到解释这一点的文档。有人知道如何阻止捆绑包包含开发运行时吗?

    • 维生素配置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()],
})
    • 系统配置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.节点. 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"
  }
}
    • 源代码/索引. tsx**
import React, { FC } from 'react'

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

export default Button
vbopmzt1

vbopmzt11#

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

react({
  jsxRuntime: 'classic',
})

这将禁用自动JSX运行时,并且输出的大小将减小。
来源:https://www.npmjs.com/package/@vitejs/plugin-react

相关问题