Ошибка синтаксического анализа BABEL: перенос реакции js в js - PullRequest
Новая
       17

Ошибка синтаксического анализа BABEL: перенос реакции js в js

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

Я пытаюсь перенести мой реагирующий jsx-код в js с помощью babel.Это команда, которую я использовал: 

npx babel BlueSlide/js/student_slider.jsx --watch --out-file BlueSlide/static/js/student_slider_compiled.js

Когда я делаю это, я получаю эту ошибку 

  49 |   render() {
  50 |     return (
> 51 |       <div class="jumbotron thinking">
     |       ^
  52 |         <h1>Welcome To Blue Slide</h1>
  53 |         <p>How well do you understand what's going on</p>
  54 |         <div class="slidecontainer">
    at Parser.raise (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:6344:17)
    at Parser.unexpected (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:7659:16)
    at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8828:20)
    at Parser.parseExprSubscripts (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8413:23)
    at Parser.parseMaybeUnary (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8393:21)
    at Parser.parseExprOps (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8280:23)
    at Parser.parseMaybeConditional (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8253:23)
    at Parser.parseMaybeAssign (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8200:21)
    at Parser.parseParenAndDistinguishExpression (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8963:28)
    at Parser.parseExprAtom (/Users/joshua/Websites/BlueSlide/node_modules/@babel/parser/lib/index.js:8760:21) {
  pos: 1356,
  loc: Position { line: 51, column: 6 },
  code: 'BABEL_PARSE_ERROR'
}

Я попытался заменить внутреннюю часть функции рендеринга простым простым div и тем жепроблема.Я не знаю, почему он кричит на меня из-за моего оператора return render.

Я просто хочу, чтобы код реакции был скомпилирован, чтобы я мог использовать его с моим html, и если это не правильный способсделайте это, не стесняйтесь предложить альтернативу.

Ответы [ 2 ]

0 голосов
/ 15 июля 2019

первая установка babel-cli 

npm i babel-cli -g //install globally so u can use anywhere

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

 npm i babel-preset-env babel-preset-react --save-dev

теперь вам нужно создать две директории. общественный и срк. в публичной папке поместите index.js и index.html.

index.html 

<body>
    <div id="here"></div>

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

index.js должен быть пустым. мы напишем наш jsx-код в каталоге src, а babel перенесет его в index.js

теперь в папке src создайте app.js и запустите этот код для тестирования

ЦСИ / app.js 

const template = <p>this is jsx</p>;
const appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);

Теперь в командной строке запустите этот код: 

babel src/app.js --out-file=public/index.js --presets=env,react --watch

если вы проверяете public / index.js 

"use strict";

var template = React.createElement(
  "p",
  null,
  "this is jsx"
);
var appRoot = document.getElementById("here");
ReactDOM.render(template2, appRoot);
0 голосов
/ 11 июня 2019

Вы не опубликовали свой файл babel.rc, но я подозреваю, что вы не установили @babel/preset-react и не добавили его в свою конфигурацию. Это необходимо для передачи синтаксиса JSX.

...