Запустите препроцессор JSX и используйте синтаксис ES6

Question

Я следовал этому руководству здесь

https://reactjs.org/docs/add-react-to-a-website.html

И в настоящее время я использую эту команду для компиляции моего jsx

npx babel --watch src --out-dir . --presets react-app/prod

К сожалению, я не могу использовать синтаксис ES6, такой как

import MyComponent from 'MyComponent';

Это не конвертирует это в синтаксис ES5, и поэтому я получаю "Uncaught SyntaxError: Неожиданный идентификатор «

Answer 1

Babel - это транспортер, конвертирующий ваши JSX и ESNext (ES6 и выше) в ES5, что позволяет даже старым браузерам понимать ваш код.Тем не менее, он не имеет возможности объединения, то есть он не получает содержимое импортированного файла и отправляет весь ваш код в одном файле.Для этого вам нужно использовать такой пакет, как Webpack.

Настройка Webpack может быть утомительной, я предлагаю вам использовать create-Reaction-app для использования предварительно настроенных Webpack и Babel.

Когда вы закончите сборку приложения, чтобы отправить его на ваш текущий веб-сайт, вы можете просто заменить root на id элемента на вашем веб-сайте внутри index.js .

ReactDOM.render(<App />, document.getElementById('root'));

Затем запустите npm, запустите сборку , чтобы создать файлы для развертывания в папке сборки.Оттуда просто скопируйте bundle.js и включите его в свой веб-сайт.

Надеюсь, это поможет!