将babel变换与create-react-app一起使用

Question

我正在javaScript / react操场上工作（类似非常简单的codesandbox.io之类的东西，我试图弄清楚如何转译代码。我当时在考虑使用Babel转换，但应用程序本身是使用create-react-app构建的，因此我无法访问Babel。我的问题是，如果我执行以下操作并安装Babel，它还会否覆盖create-rect-app当前如何为该应用转换代码？

// transpile.js
const babelOptions = {
  presets: [ "react", ["es2015", { "modules": false }]]
}

export default function preprocess(str) {
  const { code } = Babel.transform(str, babelOptions);

  return code;
}

编辑：

从那以后，我就知道可以将Babel standalone用于此用例！现在只是想知道如何配置它。我仍然希望获得帮助，但是如果我首先找到解决方案，我会为其他人发布：）

Answer 1

好，所以我已经弄清楚了，但这不是直接的。如果有人发现它有帮助，我将尝试在此处添加一些详细信息。

我首先需要独立加载Babel，所以我用this答案创建了一个自定义钩子来加载脚本：

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    console.log(`${url} script loaded`);

    return () => {
      document.body.removeChild(script);
      console.log(`${url} script removed`);
    }
  }, [url]);
};

export default useScript;

然后我像这样在组件中使用它：

import useScript from '../../../hooks/useScript';

useScript("https://unpkg.com/@babel/standalone/babel.min.js");

然后，我稍后使用在最初的问题中编写的代码来转换我的代码。

当某人决定拒绝您的问题时，总是有点令人失望，因为他们不知道如何回答，但总会有巨魔。希望有人觉得这有用。