Используйте Babel Transform с приложением create-реагировать

Question

Я работаю на javaScript / реагирующей площадке (что-то вроде очень простого codesandbox.io) и пытаюсь выяснить, как перенести код. Я думал об использовании преобразования Babel, но само приложение построено с использованием create-реагировать-приложение, поэтому у меня нет доступа к 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;
}

РЕДАКТИРОВАТЬ:

С тех пор я узнал, что я могу использовать Вавилон автономный именно для этого случая использования! Теперь просто чтобы понять, как его настроить. Я все равно буду признателен за помощь, но если я сначала найду решение, я опубликую для других:)

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

, затем я позже использую код, который я написал в первоначальном вопросе, для переноса своего кода.