Как выполнить импорт / экспорт в React JSX на стороне клиента с помощью Babel-Standalone - PullRequest
Новая
       21

Как выполнить импорт / экспорт в React JSX на стороне клиента с помощью Babel-Standalone

0 голосов
/ 29 декабря 2018

Я использую Babel-Standalone для использования JSX в приложении React без использования NPM.Бабель, по-видимому, переводит утверждения «import» в утверждения «require»;импорт 'require.js' и других зависимостей для выполнения этой работы вызывает больше ошибок.

Конечно, должен быть простой способ выполнить импорт / экспорт в контексте JSX на стороне клиента.Пожалуйста, сообщите (здесь не ищутся решения Node / NPM / Webpack; ищутся CDN соответствующей библиотеки (ий) и переписывание оператора импорта и т. Д.). 

<!doctype html>
<html lang="en-us">
<head>
    <title>React JSX Babel-Standalone Import/Export Problem</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">

// See MyExport.js text below this SCRIPT
// Goal: to employ <MyExport /> in the return of App.

// import MyExport from "./MyExport";

const App = () => {
    return (
        <div>Hello</div>
    );
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>

<!-- MyExport.js:
const MyExport = () => {
    return (
        <div>MyExport</div>
    );
};
export default MyExport;
-->

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

Существует решение: (1) JSX-скрипт, содержащий экспорт, должен быть включен в элемент SCRIPT вместе с другими;на него нельзя просто ссылаться другим скриптом.(2) И этот JSX-скрипт, и JSX-скрипт, импортирующий из него, должны иметь пользовательский атрибут data-plugins="transform-es2015-modules-umd" вместе с ожидаемым атрибутом type="text/babel".Запустите следующий HTML-код, модификацию того, что было предоставлено в вопросе, который предоставляет решение (вам нужно создать MyExport.js локально для его запуска): 

<!doctype html>
<html lang="en-us">
<head>
    <title>React JSX Babel-Standalone Import/Export Problem</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./MyExport.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel">
import MyExport from "./MyExport";
const App = () => {
    return (
        <MyExport/>
    );
};
ReactDOM.render(<App />, document.querySelector("#root"));
</script>

<!-- MyExport.js:
const MyExport = () => {
    return (
        <div>MyExport element is imported!</div>
    );
};
export default MyExport;
-->

</body>
</html>

Я надеюсь, что это поможет кому-то еще.

0 голосов
/ 29 декабря 2018

Babel не является модульным компоновщиком или реализацией модульной системы, babel - это просто транспортер, обеспечивающий доступ к последним функциям JS, которые не поддерживаются в браузере или узле.Если вы хотите использовать модули ES без каких-либо сторонних организаций, таких как веб-пакеты, накопительные пакеты и т. Д., Посмотрите на https://developers.google.com/web/fundamentals/primers/modules.

. Вы должны иметь возможность сделать что-то вроде: 

<script type="module">
  import MyExport from "./url/to/MyExport.mjs";

  const App = () => {
    return (
        <div>Hello</div>
    );
  };

  ReactDOM.render(<App />, document.querySelector("#root"));
</script>

Модули JS с помощью тегов сценариев поддерживаются только в последних версиях основных браузеров: https://caniuse.com/#feat=es6-module

Кроме того, вам необходимо обойти тот факт, что для babel-standalone теги сценариев должны быть text/babel

...