如何使用 Babel 在 vanilla JS 中执行 JSX 文件

Question

我想在 vanilla JS 中导入一个 JSX 文件并执行它，以便我得到一个实际的组件 object。我试图用 Babel 来做这个，但它只给我一个字符串形式的代码，它不执行它。 我不想 eval 因为它是非标准的并且相对目录字符串没有改变。

我目前正在尝试

const babel = require('@babel/core')

  babel.transformFileAsync('./src/Page.jsx', {
    plugins: [
      '@babel/plugin-transform-react-jsx',
      '@babel/plugin-transform-modules-commonjs'
    ]
  })
    .then((parsed) => {
      const page = React.createElement(eval(parsed.code), {
        classes: db.classes
      })
    })

但是，我在 JSX 文件中的import './styles/Page.css'失败，因为相对路径在它被评估的文件中不正确。

Answer 1

您是否为 css 和样式添加了这些包？

// npm
npm install --save-dev css-loader style-loader
// yarn
yarn add --dev css-loader style-loader

您可以在此处阅读有关如何将 Webpack 和 Babel 与 Vanila JS 结合使用的更多信息。