BABEL 解析錯誤：將 react js 轉換為 js

Question

我正在嘗試使用 babel 將我的 react jsx 代碼轉換為 js。 這是我使用的命令：

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 和同樣的問題來替換渲染函數的內部。 我不知道為什么它對我的渲染返回語句大喊大叫。

我只想編譯反應代碼，以便我可以將它與我的 html 一起使用，如果這不是正確的方法，請隨時提出替代方案。

Answer 1

首先安裝 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。

索引.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 應該是空的。 我們將在 src 目錄中編寫我們的 jsx 代碼，babel 會將其轉換為 index.js

現在在 src 文件夾中創建 app.js 並運行此代碼進行測試

源代碼/應用程序.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);

Answer 2

您尚未發布 babel.rc 文件，但我懷疑您尚未安裝@babel/preset-react並將其添加到您的配置中。 這是轉換 JSX 語法所必需的。

Answer 3

@babel/preset-react

應該安裝。 在編譯 jsx -> js 代碼時：

--presets @babel/react

應提供參數。 所以你的編譯代碼看起來像這樣：

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

BABEL 解析錯誤：將 react js 轉換為 js

問題描述

3 個解決方案

解決方案1
1 2019-07-15 14:50:49

解決方案2
0 2019-06-11 01:41:38

解決方案3
0 2019-10-27 00:21:23

BABEL 解析錯誤：將 react js 轉換為 js

問題描述

3 個解決方案

解決方案1 1 2019-07-15 14:50:49

解決方案2 0 2019-06-11 01:41:38

解決方案3 0 2019-10-27 00:21:23

解決方案1
1 2019-07-15 14:50:49

解決方案2
0 2019-06-11 01:41:38

解決方案3
0 2019-10-27 00:21:23