2022年如何让Node.js快速导入JSX文件？Express场景求解

核心问题原因 #

Node.js默认不识别.jsx文件扩展名，也无法解析JSX语法，直接导入会触发ERR_UNKNOWN_FILE_EXTENSION错误，必须先将JSX转译为Node可执行的JavaScript代码。

方案一：用esbuild快速转译（推荐，轻量极速） #

esbuild是一款极速的JavaScript转译工具，依赖极小，完全满足你对“无大量依赖、快速”的需求。

1. 安装依赖

npm install esbuild --save-dev

2. 修改Express视图引擎代码

import * as ReactDOMServer from 'react-dom/server'
import * as esbuild from 'esbuild'
import fs from 'fs/promises'
import React from 'react'

app.engine('jsx', async function (filePath, options, callback) {
  try {
    // 读取JSX文件内容
    const jsxContent = await fs.readFile(filePath, 'utf8')
    // 转译JSX为ES模块代码，自动引入React运行时
    const { code } = await esbuild.transform(jsxContent, {
      loader: 'jsx',
      format: 'esm',
      jsx: 'automatic',
      target: 'node16' // 匹配你的Node版本
    })
    // 通过数据URL导入转译后的模块
    const module = await import(`data:text/javascript,${encodeURIComponent(code)}`)
    // 获取组件的默认导出
    const Component = module.default
    // 渲染组件并传入options作为props
    const html = ReactDOMServer.renderToString(<Component {...options} />)
    callback(null, html)
  } catch (err) {
    callback(err)
  }
})

// 配置视图引擎及目录
app.set('view engine', 'jsx')
app.set('views', './views') // 根据你的项目结构调整路径

方案二：放弃JSX语法糖（无额外依赖） #

如果完全不想引入任何转译工具，只能手动用React.createElement替代JSX语法，这样Node可以直接导入.js文件：

示例组件文件（./views/Hello.js）：

import React from 'react'

export default function Hello(props) {
  return React.createElement('div', null, `Hello, ${props.name}!`)
}

修改引擎代码：

import * as ReactDOMServer from 'react-dom/server'
import React from 'react'

app.engine('js', async function (filePath, options, callback) {
  try {
    const module = await import(filePath)
    const Component = module.default
    const html = ReactDOMServer.renderToString(React.createElement(Component, options))
    callback(null, html)
  } catch (err) {
    callback(err)
  }
})

app.set('view engine', 'js')
app.set('views', './views')

这个方案完全无额外依赖，但失去了JSX的语法便利，仅适合极简单场景。

内容的提问来源于stack exchange，提问作者kjoedion