我在我的tsconfig文件中使用"jsx": "react-jsx",
,并使用Vite/rollup进行绑定。由于某种原因,我的模块总是与react-jsx-runtime.production.min.js
和react-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
1条答案
按热度按时间vbopmzt11#
我遇到了同样的问题,我通过选择退出自动JSX运行时解决了这个问题。
这将禁用自动JSX运行时,并且输出的大小将减小。
来源:https://www.npmjs.com/package/@vitejs/plugin-react