如何在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.jsimport 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