Могу ли я использовать ES-модули в браузере с babel, не связывая свой код? - PullRequest
Новая
       1

Могу ли я использовать ES-модули в браузере с babel, не связывая свой код?

0 голосов
/ 08 июня 2019

Я хотел бы загрузить свой код реагирования в браузере, используя babel-standalone.Поэтому я ищу правильную конфигурацию для Babel Standalone (или любого другого решения), чтобы загружать ES-модули в браузере при использовании babel.

Я создал глюк ниже, чтобы показать мою проблему.https://glitch.com/edit/#!/example-es-modules-with-babel?path=index.html:1:0

Редактировать: вышеупомянутая ссылка теперь содержит рабочий пример.

Я потратил немало времени на поиски и тестирование, но это довольно сложновыяснить это самостоятельно.Поэтому мне интересно, может ли кто-нибудь помочь мне подняться над работой Глитча.

По поводу аналогичного обсуждения вопроса, пожалуйста, обращайтесь: https://github.com/babel/babel/issues/9976

Редактировать: Мотивация

Это просто для развлечения и для создания прототипов идей, как в коде.Создание dev-установки и связывание кода js - лучшая вещь для любого нетривиального приложения.

1 Ответ

0 голосов
/ 08 июня 2019

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

Изменения:

  • Переключен с AMD на UMD.AMD использует require.js, который, по-видимому, конфликтует с babel-standalone в части трансплантации.Также был удален скрипт require.js как часть этого процесса.
  • Явно импортированный app.js с тегом скрипта:
    • <script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>
    • Если вы хотите переключиться навстроенные модули, вам нужно будет использовать атрибут data-module.См. это изменение для babel-standalone .

Также обратите внимание, что вы идете по маршруту, который, вероятно, вам не нужен.В тот момент, когда вы имеете дело с экспортом / импортом / модулями и несколькими файлами компонентов, вам действительно следует переключиться на такой пакет, как веб-пакет - есть причина, по которой большинство потоков по этой проблеме просто рекомендуют перейти на него.

Оригинальный HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">


    <script src="https://unpkg.com/@babel/standalone@7.4.4/babel.js"></script>    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>

    <script>
      Babel.registerPreset("my-preset", {
        presets: [
          [Babel.availablePresets["es2015"], { "modules": false }],
          [Babel.availablePresets["react"]]

        ],
        plugins: [
          [Babel.availablePlugins["transform-modules-amd"]]
        ],
        moduleId: "main"
      });
    </script>
    <script type="text/babel" data-presets="my-preset">
      import App from './app.js'
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>

  </head>  
  <body>
    <p>Output should appear below.</p>
    <hr/>
    <div id="root"></div>
  </body>
</html>

Модифицированный HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">


    <script src="https://unpkg.com/@babel/standalone@7.4.4/babel.js"></script>    
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!--     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script> -->

    <script>
      Babel.registerPreset("my-preset", {
        presets: [
          [Babel.availablePresets["es2015"], { "modules": false }],
          [Babel.availablePresets["react"]]

        ],
        plugins: [
          [Babel.availablePlugins["transform-modules-umd"]]
        ],
        moduleId: "main"
      });
    </script>
    <script type="text/babel" src="./app.js" data-plugins="transform-modules-umd"></script>
    <script type="text/babel" data-presets="my-preset">
      import App from './app'
      ReactDOM.render(<App />, document.getElementById('root'));
    </script>

  </head>  
  <body>
    <p>Output should appear below.</p>
    <hr/>
    <div id="root"></div>
  </body>
</html>

И app.js остается прежним: 

export default () => <h1>It Works!</h1>
...