1

在这里反应 Noob。

我已经坚持了一段时间。

我试图将一个模块添加到我正在制作的项目中，但发现当我使用新的 create-react-app 运行它时会出现同样的问题。

我相信它与 babel/JSX 有关，因为如果我将导入的模块 src 放入一个新项目或只是放入现有项目的 src 中，它似乎编译得很好，而不是作为导入。

1）设置新的反应应用程序：

npx create-react-app test-project
cd test-project

2）安装包：

npm install --save react-collision-provider

3) 将导入添加到 App.js

+ import { collisionProviderFactory } from 'react-collision-provider';

4) 启动项目

npm start

错误：

./node_modules/react-collision-provider/src/components/collisionProviderFactory.js
SyntaxError: /Users/XXXXXXX/Documents/TestProjects/test-project/node_modules/react-collision-provider/src/components/collisionProviderFactory.js: Unexpected token (37:14)

  35 |     render() {
  36 |       const Component = this.props.component;
> 37 |       return (<Component
     |               ^
  38 |         onCollision={this.onCollision}
  39 |         updatePosition={this.updatePosition}
  40 |         {...this.props}

我试图弄乱不同的 babel 设置并弹出项目，但没有运气。我听说 CRA 不会仅编译 node_modules src，但不确定如何在 node_modules 中高级编译 JSX？

谢谢。

4

1 回答 1

1

你是对的，问题是react-collision-provider没有被正确地转换为浏览器理解。浏览器不会自然理解JSX，因为这是轻松创建React组件视图的语法糖。这就是为什么我们使用babel转换JSX为原生的并且可以被浏览器理解的React.createElement(...);调用。JavaScript

也许您可以执行以下操作：

  1. 下载babel-cli：

    npm install --save-dev @babel/cli

  2. 下载@babel/plugin-transform-react-jsx插件。我们需要这个插件，因为Babel6 和更高版本不再有任何用于 React 的原生转换。这对于将不受支持JavaScript的功能（例如.JSXJavaScript

    npm install --save-dev @babel/plugin-transform-react-jsx

  3. scripts在文件的部分中创建一个自定义命令package.json来转换您的react-collision-provider节点模块。类似于以下内容：

    "scripts": { ... "libTranspile": "babel --plugins @babel/transform-react-jsx <path_to_react_collison_module> --out-dir <path_to_react_collision_module> --copy-files", ... },

  4. 现在您应该能够运行您的自定义命令来转译您的react-collision-provider模块：

    npm run libTranspile

该react-collision-provider模块现在应该被转译，所有JSX代码部分都替换为React.createElement(...);调用。

希望这会有所帮助！

于 2019-05-02T17:40:27.070 回答