React编译器最终以意外的令牌＆Lt;

Question

我是React的初学者，并且在编译器错误中挣扎。让我介绍我的情况。我有两个独立的React应用程序：

1. 应用程序A -Big ERP
2. 应用B-“插件”在App A中，

我认为我会开发应用B作为独立应用程序。然后，我将其安装到应用程序A（使用 npm install /... ）一旦我完成了应用B的开发。我希望我将在应用程序中调用App B中的组件为源代码。一切都很好，直到我运行汇编为止。我正在收到：

SyntaxError: /frontend/node_modules/connector_frontend/src/views/Connector/FormView/index.js: Unexpected token

在我的/frontend/node_modules/connector_frontend/src/views/connector/formview/index.js 中有以下代码：

const ConnectorFormView = ({ AppValues, secureFetch, ...rest }) => {
return (
        <p>Hello world</p>
)
}
export default ConnectorFormView;

错误是在>＆lt; p＆gt; p＆gt; 。

我从应用程序调用此功能组件（ frontend/src/views/connector/connectorneweditview/index.js ），

import ConnectorFormView from "connector_frontend/src/views/Connector/FormView";

const ConnectorNewEditView = () => {
return (<ConnectorFormView AppValues={appValues} secureFetch={secureFetch} />)
}
export default ConnectorNewEditView;

我试图只返回 connectorforforfiew 的纯文本。像这样的组件：

const ConnectorFormView = ({ AppValues, secureFetch, ...rest }) => {
return (
        'Hello world'
)
}
export default ConnectorFormView;

它是成功编译的，但是一旦我从 connectorformview 组件返回JSX后，编译器就会崩溃。

谁能解释此错误的根源？

Answer 1

我成功地找出了这个问题的根源，也找到了一个解决方案。我希望我可以重复使用JSX中实现的反应组件。我希望，唯一的要求是安装它，resp。使用NPM以JSX表单下载到我的项目。这是错误的。

根据我的研究，我只能将React组件从JSX汇编为ES。使用Babel可以实现。另一个非常重要的要求，它不应在我安装时作为React应用程序安装。必须将其安装为具有明确定义的导出组件集的NPM软件包。

我发现本文我逐步遵循它，最后我取得了预期的结果。

我可以非常简短地提及我执行的步骤：

1. 实现了我的自定义组件（上面提到）

const ConnectorFormView = ({ AppValues, secureFetch, ...rest }) => {
return (
        <p>Hello world</p>
)
}
export default ConnectorFormView;

2. 将组件添加到/src/index.js 文件中，以将其导出到安装的主机应用程序

import ConnectorFormView from './components/ConnectorFormView';

export { ConnectorFormView };

3. 的Babel和所有需要的预设

npm install --save-dev @babel/core @babel/cli @babel/preset-env 
npm install -save @babel/polyfill

4. 配置的babel-创建的文件/babel.config.json ，以下内容

{
 "presets": [
  [
   "@babel/env",
    {
     "targets": {
     "edge": "17",
     "firefox": "60",
     "chrome": "67",
     "safari": "11.1"
      },
   "useBuiltIns": "usage",
   "corejs": "3.6.5"
    }
],
   "@babel/preset-react"
]
}

5. 添加了新脚本到 package.json 以将React组件编译为ES：

"build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files";

6. 执行 NPM运行构建以将React组件编译为ES。编译的组件位于新 dist 文件夹中。

7. 调整后的 package.json 现在看起来像这样

{
  "name": "my_react_components",
  "version": "0.1.0",
  "private": true,
  "description": "Some description",
  "author": "Lukas",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [ "dist", "README.md" ],
  "dependencies": {
    .
    .
  },
  "scripts": {
    "build": "rm -rf dist && NODE_ENV=production babel src--out-dir dist --copy-files",
    .
    .
    .
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.5",
    "@babel/preset-env": "^7.18.2"
  }
}

8. 按 dist git的文件夹。

9. 使用NPM

   安装到主机项目的存储库

npm install https://github.com/my_custom/react_component.git

10. ，并使用已安装的Git Repo中的组件

import ConnectorFormView from 'my_react_components';

function App() {
return (
   <ConnectorFormView />
);
}
export default App;

实际上就是全部。我非常建议您在此答案的开头查看附带的纸张，因为我可能会为您跳过非常重要的信息。