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

Question

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

    ReactPDF.render()

在我过去用来创建网页的运行 React 的 npm start (react-scripts) 方式中不起作用。来自阅读this issue ，似乎它需要作为“仅 Node api”运行。所以我的问题是，我需要采取哪些依赖项、命令和步骤来运行一些 React 代码并将 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"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

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

Answer 1

既然你正在运行index.mjs直接来自 Node ，它不经过 react-scripts 的构建和转译过程，这意味着您必须手动执行此操作。

Node 无法直接解析 jsx(例如 <App/> ) - 因此您需要通过 Babel 运行代码与 React preset以便运行它。

由于依赖项应该已经安装，请尝试运行:

npx babel index.mjs -o index-compiled.js --presets=es2015,react

然后运行编译后的文件:

node index-compiled.js