Не удается импортировать файл внутри встроенного Babel ReactJS unpkg
Привет, ребята, я использую React и React-DOM unpkg, чтобы добавить реакцию на мою веб-страницу. я также использую babel unpkg для включения jsx. но у меня проблема при импорте другого файла. вот код файла
class Trial extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}
module.exports = Trial;
затем я импортирую его в свой html с этим кодом
<script crossorigin src = "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/babel.min.js"></script>
<div id = "root"></div>
<script type = "text/babel">
const Trial = require('./App')
class App extends React.Component {
render() {
return (
<div className = "navbar">
<Trial />
......
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
но он продолжает выдавать ошибку...
Uncaught ReferenceError: require is not defined
at <anonymous>:38:14
at n (babel.min.js:12)
at r (babel.min.js:12)
at o (babel.min.js:12)
at u (babel.min.js:12)
at E (babel.min.js:1)
кто-нибудь знает, что происходит?
@kingdaro CRA было бы здорово, но мне нужно объединить приложение с приложением Laravel. Страница, над которой я работаю, используется только для функции поиска, остальное использует Laravel. поэтому я использую unpkg. любой обходной путь, который вы можете предоставить?
Вы по-прежнему можете использовать CRA, и ваше приложение Laravel будет ссылаться на файлы, созданные CRA, в папке build. Если вам нужна большая гибкость, вы можете создать свою собственную сборку веб-пакета и сделать так, чтобы ваше приложение ссылалось на выходной JS-файл. Или используйте простой инструмент, такой как посылка. На самом деле любой вид процесса связывания модулей. Альтернативой является помещение всего в глобальную область видимости, но это было бы кошмаром для ремонтопригодности.
@kingdaro спасибо, попробую твоё предложение
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы действительно хотите использовать import / require во время выполнения, либо используйте оператор import, который в настоящее время широко поддерживается в вечнозеленых браузерах, либо используйте библиотеку динамического загрузчика модулей, такую как SystemJS или ТребоватьJS (последняя, правда, древняя).
Кроме того, в рабочей среде рекомендуется выполнять Преобразование JSX во время выполнения нет.
Ошибка не может быть такой же (require is not defined), если вы используете инструкцию import. Что именно вы пробовали?
такая же ошибка дружище. я использую приложение для экспорта по умолчанию в App.js и использую приложение для импорта из './App' в index.html
Правильный синтаксис — import App from './App.js', но он должен быть в элементе <script type='module'>, что невозможно в вашем случае, потому что вы должны использовать тип text/babel.
да, я пытаюсь импортировать его по типу скрипта/babel и получаю ошибку
Решение состоит в том, чтобы либо а) не использовать JSX, либо б) использовать SystemJS, либо в) просто использовать сборщик модулей, такой как webpack (то, что использует приложение create-реагировать) или rollup.
Babel транспилирует JSX, но
require()не работает в браузере. Можно ли вместо этого использовать создать-реагировать-приложение? Это был бы мой предпочтительный маршрут