Можно ли использовать babel-standalone, если index.html является локальным сервером? (без веб-сервера)

Прежде чем я начну вопрос, вот что я уже знаю, чтобы избежать ответов в том же духе.

TL; DR: я уже знаю, что могу использовать веб-сервер и обслуживать index.html как http://localhost:8081/index.html и это будет работать.

Теперь о деталях вопроса:

Я создал минимальное приложение response-js, ссылаясь на babel-standalone в файле index.html следующим образом:

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

    <title>Minimal</title>
</head>
<body>
    <div id='divRootComponent'></div>

    <!-- react reasonably latest for oct/2018 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

    <!-- babel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

    <!-- react CUSTOM component.. i.e. myApp's entry point -->
    <script type="text/babel" src="index.js"></script>
</body>
</html>

и содержимое index.js:

class YoSupComponent extends React.Component {

  constructor () {
    super();

    this.state = {
      message: 'whatever...'
    };
  }


  componentDidMount() {
    console.log('YoSupComponent.componentDidMount');
  }

  render () {

    return (
      <div>
        Yo ! Dude or Dudette... sup ?
      </div>
    );
  }
}

const props = {}; //none for now...
ReactDOM.render(<YoSupComponent {...props} />
  , document.getElementById('divRootComponent'))

Когда я пытался получить доступ к файлу index.html в браузере через файл:///path/to/index.html, ошибка была такой:

Доступ к XMLHttpRequest по адресу 'file:///D:/path/to/index.js' из источника 'null' был заблокирован политикой CORS: Запросы перекрестного происхождения поддерживаются только для схем протоколов: http, data, chrome, chrome расширение, https. @ babel.min.js:24

Таким образом, думая, что проблема связана с тегами сценариев, ссылающимися на файлы удаленно, я загружаю реакцию и бабел локально, и делаю ссылки локальными; затем снова я получаю доступ к файлу:///path/to/index.html.

Тем не менее получить ту же ошибку! в чем дело? а) почему babel даже использует XMLHttpRequest (согласно сообщению об ошибке), когда файл babel.js теперь локальный? б) почему нет такого сообщения для реагирующих файлов?

Источник

1 ответ

Решение

Согласно MDN, если вы укажете тег сценария с типом, который не text/javascript, он будет игнорироваться браузером:

Внедренный контент обрабатывается как блок данных, который не будет обрабатываться браузером. Разработчики должны использовать действительный MIME-тип, который не является MIME-типом JavaScript, для обозначения блоков данных. Атрибут src будет игнорироваться.

Другими словами, браузер не загружается и не запускается index.js в вашем примере. Это имеет смысл - в противном случае вы получите синтаксическую ошибку, так как ваш браузер не может понять JSX.

На самом деле происходит то, что babel-standalone скрипт просматривает ваш HTML, находит все теги скрипта, помеченные text/babelзагружает их черезXMLHttpRequest, а затем компилирует и запускает их.

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

Источник
Другие вопросы по тегам