如何在Node脚本中使用React组件？

Question

我目前正在尝试使用react-pdf来生成pdf并将其保存到磁盘。渲染到网页是可行的，但是我需要调用将pdf保存到光盘的方法，

    ReactPDF.render()

在我过去用来创建网页的运行React的npm start（react-scripts）方式下不起作用。从阅读此问题开始，似乎需要将其作为“仅节点api”运行。所以我的问题是，我需要采取哪些依赖关系，命令和步骤来运行一些反应代码并将pdf文件保存到磁盘，例如

   > node index.js

当前，当我运行上述命令时，我得到

import React from 'react';

       ^^^^^

SyntaxError: Unexpected identifier

然后，跑步

    node --experimental-modules index.mjs

我懂了

ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);

                ^

SyntaxError: Unexpected token <

这是我的两个文件：

index.js

    import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    import ReactPDF from '@react-pdf/renderer';

    ReactPDF.render(<App />, `${__dirname}/output/test.pdf`);

    //ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React, { Component } from 'react';

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'

class App extends Component {

  render() {

    const styles = StyleSheet.create({

      page: {

        flexDirection: 'row',

        backgroundColor: '#E4E4E4'

      },

      section: {

        margin: 10,

        padding: 10,

        flexGrow: 1

      }

    });

    return (

      <Document>

        <Page size="A4" style={styles.page}>

          <View style={styles.section}>

            <Text>Section #1</Text>

          </View>

          <View style={styles.section}>

            <Text>Section #2</Text>

          </View>

        </Page>

      </Document>

    );

  }

}

export default App;

package.json

{

  "name": "ccv-generator-react",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@react-pdf/renderer": "^1.4.2",

    "react": "^16.8.5",

    "react-dom": "^16.8.5",

    "react-scripts": "2.1.8",

    "ts-pnp": "^1.0.1",

    "typescript": "^3.3.4000"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app"

  },

后续问题将是，我正在尝试做反模式吗？

Answer 1

由于您是index.mjs直接从node运行的，因此它不会经历的构建和编译过程react-scripts，这意味着您必须手动进行操作。Node无法直接解析jsx（<App/>例如，）-因此您需要通过Babel使用React预设来运行代码才能运行它。由于应该已经安装了依赖项，因此请尝试运行：npx babel index.mjs -o index-compiled.js --presets=es2015,react然后运行编译的文件：node index-compiled.js