реагировать скрипт не загружается - PullRequest
Новая
       1

реагировать скрипт не загружается

4 голосов
/ 06 января 2020

У меня есть следующий скрипт:

app. js

import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';

const App = () => (
    <Stage>
        <Sprite image="assets/baseBike.png" x={100} y={100}/>
    </Stage>
);

ReactDOM.render(<App/>, document.body);

И следующий

index. html

    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World</title>
</head>
<body>
<div id="stageContainer">

</div>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>

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

, если я удаляю type="text/babel", то выдает ошибку: 

Cannot use import statement outside a module

Может кто-нибудь сказать мне, кто я? отсутствует?

Обновить babel

Итак, я заметил, что мне не хватает babel, однако после добавления я получаю следующую ошибку: 

 require is not defined

Ответы [ 3 ]

3 голосов
/ 06 января 2020

Я думаю, что поскольку вы используете document.body на вашем ReactDOM.render, вы случайно удалили скрипт app.js.

Попробуйте использовать div в качестве точки монтирования, чтобы посмотреть, решит ли это вашу проблему.

например 

ReactDOM.render(<App />, document.getElementById('stageContainer'));
1 голос
/ 06 января 2020

при использовании reactjs с браузером, использующим babel, вам не нужно использовать импорт, вот как я создал простое приложение, которое работает с браузером (обратите внимание, что я не использую create-реагировать-приложение): приложение. js 

const App = () =>{
return <h1>Test App</h1>
 };
ReactDOM.render(<App/>, document.getElementById('root'));

Вы можете использовать этот компонент в индексе. html как 

<!doctype html>
   <html>
     <head>
        <meta charset="utf-8">
          <title>Hello World</title>
      </head>

   <body>
<!-- some HTML -->
<div id="root"></div>
<!-- some other HTML -->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- import react.js -->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
<!-- import react-dom.js -->

<script type="text/babel" src="/app.js"></script>
<!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
  </body>
</html>

Я проверил его, и он сработал для меня, надеюсь, он поможет вам

1 голос
/ 06 января 2020

Поскольку вы используете Babel в Real, вы должны настроить пресет Babel, который вы хотите скомпилировать в сценарии.

Возможно, вам нужно что-то вроде этого: 

    <script>
        Babel.registerPreset('myPreset', {
            presets: [[Babel.availablePresets['es2015-loose'], { modules: false }], [Babel.availablePresets['react']]],
            plugins: [[Babel.availablePlugins['transform-modules-umd']]],
        });
    </script>

    <script type="text/babel" src="app.js" data-presets="myPreset"></script>

Примечание что свойство data-presets тега script указывает babel использовать заданный вами пресет.

...