创建React App： Transpile JSX的外包装在node_modules

Question

我正在尝试在我的react项目中使用react scratchblocks包。

我已经使用createappreact命令创建了我的项目。

导入包后，我出现以下错误：

编译失败。

./node_modules/react-scratchblocks/src/Scratchblocks.js
SyntaxError: /Users/jorge/Documents/React/elimu-analyzer-frontend/node_modules/react-scratchblocks/src/Scratchblocks.js: Unexpected token (45:6)

  43 |     const scripts = this.parseScripts(this.props.code);
  44 |     return (
> 45 |       <div className={this.classNames()}>
     |       ^
  46 |         {scripts.map((script,i) => (
  47 |           <Scratchblock key={i} className="script" script={script}/>
  48 |         ))}

我知道jsx还没有被识别，但是我应该怎么做才能让这个包工作呢？记住：我已经使用createrect应用程序创建了我的React项目。

谢谢

更新1：

module.exports = function () {

return {
    overrides: [{
        test: ["./node_modules/react-scratchblocks"],
        presets: ["@babel/preset-react"]
    }],
};
}

更新2：我在其中导入块的组件。

import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import './styles.css';
import Fire from '../../config/Fire';
import Realtime from '../Realtime';
import Scratchblocks from 'react-scratchblocks'

function Content(props) {

const [menuOption, setMenuOption] = useState(1);

async function logout() {
    await Fire.logout();
    props.history.push('/');
    console.log('oi');
}

if (menuOption === 0) {
    return (
        <div class='content'>
            <Realtime />
        </div>
    );
}
else if (menuOption === 1) {
    return (
        <div class="content">
            <button onClick={logout}> OUTRA OPÇÃO </button>
        </div>
    );
}
}

export default withRouter(Content);

Answer 1

我个人建议您使用craco（参见@craco/craco）

Craco是一个功能强大的工具，允许您编辑内置的create react app配置，而无需强制您弹出项目。

怎么安装呢

• 运行npm安装@craco/craco--save-dev
• 运行npm安装craco-Babel-loader--save-dev
• 在项目的根文件夹中创建craco.config.js
• 更新package.json中的脚本：
  • 反应脚本启动-

  const path = require('path')
  const fs = require('fs')
  const cracoBabelLoader = require('craco-babel-loader')
  
  // manage relative paths to packages
  const appDirectory = fs.realpathSync(process.cwd())
  const resolvePackage = relativePath => path.resolve(appDirectory, relativePath)
  
  module.exports = {
    plugins: [
      {
        plugin: cracoBabelLoader,
        options: {
          includes: [
            resolvePackage('node_modules/package-to-transpile'),
            resolvePackage('node_modules/another-package-to-transpile'),
          ],
        },
      },
    ],
  }
  

  你可以改变很多其他配置，我建议你看看craco npm包页面

  信用：https://stackoverflow.com/a/58603207/4277948

Answer 2

Create React App（CRA）仅传输node\u模块内的标准JavaScript语法。

这不包括JSX编译。由于未转换JSX导致的包块错误：

SyntaxError:…/Scratchblocks.js:意外标记（45:6）

来自维护者的声明（链接）：

我们只在node_模块中编译有效的JavaScript语法。JSX不是有效的JavaScript。您正在使用JSX。

我们采取这种立场的原因是因为编译非标准语法紧密耦合库以构建工具。

一旦你允许实验性的东西，也很难划清界限。大多数人不仅希望使用JSX，还希望使用实验转换，如类属性。或者装饰师。现在，我们必须与每个库维护人员争论我们想要支持哪些转换，哪些不需要。

因此，在发布之前，包作者需要自己传输JSX。

要手动转置JSX¹，您可以将Babel React预设应用于react-scilchblock内部的node_modules：

babel node_modules/react-scratchblocks \
  -d node_modules/react-scratchblocks/dist \
  --presets=@babel/preset-react

构建步骤可以外包到自己的配置文件（transpile.js）中：

module.exports = {
  ...
  overrides: [
    {
      test: ["./node_modules/react-scratchblocks"],
      presets: ["@babel/preset-react"]
    }
  ]
};

babel node_modules/react-scratchblocks \
  -d node_modules/react-scratchblocks/dist \
  --config-file ./transpile.js

然后调整main条目中的node_modules/react-grachblock/package.json，以指向之前在dist中转置的版本：

"main": "dist/index.js",

补丁包可以进一步自动化修复破损包的过程。

请记住，这只是一种变通方法——包开发人员有责任分发具有标准JavaScript特性的npm包。

¹另一种选择是调整网页包配置（仅在弹出CRA时才可能）。