在 create-react-app 中使用 babel transform

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 用于这个用例！现在只是弄清楚如何配置它。我仍然会很感激帮助，但如果我首先找到解决方案，我会 post 为其他人:)

Answer 1

好的，我已经想通了，但这不是直截了当的。我会尝试在此处添加一些详细信息，以防其他人觉得有用。

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

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");

然后我稍后使用我在初始问题中编写的代码来转译我的代码。

在 create-react-app 中使用 babel transform

Use babel transform with create-react-app

babeljs

create-react-app