我正在尝试在HTML文件中合并简单的React代码。我已经导入了babel并做出反应，并包括了要成为babel的类型。打印Hello World可行，但是当我需要文件位于同一路径时，出现“未捕获的SyntaxError：无效或意外的令牌”错误
我在这里错过了什么吗？谢谢
mainWindow.html（下半部分附近的反应部分）
<html>
<head>
<title>Ground Station</title>
<script src="functions.js"></script>
<script>window.$ = window.jQuery = require('jquery');</script>
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="stylesheet" type="text/css" href="mainWindow.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script>
$( function() {
for (var i = 1; i < 9; i++)
$( "#dropbtndiv" + i ).draggable();
} );
</script>
</head>
<body class="flex container column default_border">
<div class="flex container row sidebar default_border">
<div class="primary module">
<label>Ox. Tank Mass:
<input type="text" readonly value="Standby" id = "checkres1">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval1">
<label>Ox. Tank Pressure:
<input type="text" readonly value="Standby" id = "checkres2">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval2">
<label>Liquid Ox. Temp 1:
<input type="text" readonly value="Standby" id = "checkres3">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval3">
<label>Liquid Ox. Temp 2:
<input type="text" readonly value="Standby" id = "checkres4">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval4">
<label>Loaded Mass of Liquid:
<input type="text" readonly value="Standby" id = "checkres5">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval5">
<label>Flight Systems Continuity:
<input type="text" readonly value="Standby" id = "checkres6">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval6">
<label>Ignition Continuity:
<input type="text" readonly value="Standby" id = "checkres7">
</label>
<input class="coupler" type="text" readonly placeholder="Missing Value" value="" id = "checkval7">
<p id = "status"></p>
</div>
<div class="secondary module">
<p class="heading">Pre-Launch Requirements</p>
<label>Ox. Tank Pressure:
<input id = "required_ox_pres" class="coupler" type="text" readonly placeholder="Missing Value" value="">
</label>
<label>Liquid Temp. 1:
<input id = "required_temp1" class="coupler" type="text" readonly placeholder="Missing Value" value="">
</label>
<label>Liquid Temp. 2:
<input id = "required_temp2" class="coupler" type="text" readonly placeholder="Missing Value" value="">
</label>
<label>Liquid Mass:
<input id = "required_mass" class="coupler" type="text" readonly placeholder="Missing Value" value="">
</label>
<button class="button1 higher" id="btn_check_ignition">Check Ignition</button>
<ol>
<li id = "li1" value = ""></li>
<li id = "li2" value = ""></li>
<li id = "li3" value = ""></li>
<li id = "li4" value = ""></li>
<li id = "li5" value = ""></li>
<li id = "li6" value = ""></li>
<li id = "li7" value = ""></li>
</ol>
</div>
</div>
<div class="main flex container row default_border">
<div class="flex container column default_border">
<div class="fill_system module">
<div class="block_label">Fill System</div>
<div class = "readouts">
<div class = "dropdown" id = "dropbtndiv1">
<div class="dropbtndiv1" id = "dropbtndiv1">
<button class = "dropbtn1" id = "dropbtn1">Thermocouple 1</button>
<div class = "read_value" id = "read_value1" value = 50>50K</div>
<div class = "dropdown-content">
<option id = "db1_val1" onClick="reply_click(this.id)">Ox. Temp 1</option>
<option id = "db1_val2" onClick="reply_click(this.id)">Ox. Temp 2</option>
<option id = "db1_val3" onClick="reply_click(this.id)">Pre-Inj. Temp</option>
<option id = "db1_val4" onClick="reply_click(this.id)">Post-Inj. Temp</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv2">
<div class="dropbtndiv2" id = "dropbtndiv2">
<button class = "dropbtn2" id = "dropbtn2">Thermocouple 2</button>
<div class = "read_value" id = "read_value2" value = 500>500K</div>
<div class = "dropdown-content">
<option id = "db2_val1" onClick="reply_click(this.id)">Ox. Temp 1</option>
<option id = "db2_val2" onClick="reply_click(this.id)">Ox. Temp 2</option>
<option id = "db2_val3" onClick="reply_click(this.id)">Pre-Inj. Temp</option>
<option id = "db2_val4" onClick="reply_click(this.id)">Post-Inj. Temp</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv3">
<div class="dropbtndiv3" id = "dropbtndiv3">
<button class = "dropbtn3" id = "dropbtn3">Thermocouple 3</button>
<div class = "read_value" id = "read_value3" value = 400>400K</div>
<div class = "dropdown-content">
<option id = "db3_val1" onClick="reply_click(this.id)">Ox. Temp 1</option>
<option id = "db3_val2" onClick="reply_click(this.id)">Ox. Temp 2</option>
<option id = "db3_val3" onClick="reply_click(this.id)">Pre-Inj. Temp</option>
<option id = "db3_val4" onClick="reply_click(this.id)">Post-Inj. Temp</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv4">
<div class="dropbtndiv4" id = "dropbtndiv4">
<button class = "dropbtn4" id = "dropbtn4">Thermocouple 4</button>
<div class = "read_value" id = "read_value4" value = 300>300K</div>
<div class = "dropdown-content">
<option id = "db4_val1" onClick="reply_click(this.id)">Ox. Temp 1</option>
<option id = "db4_val2" onClick="reply_click(this.id)">Ox. Temp 2</option>
<option id = "db4_val3" onClick="reply_click(this.id)">Pre-Inj. Temp</option>
<option id = "db4_val4" onClick="reply_click(this.id)">Post-Inj. Temp</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv5">
<div class="dropbtndiv5" id = "dropbtndiv5">
<button class = "dropbtn5" id = "dropbtn5">Pressure Transducer 1</button>
<div class = "read_value" id = "read_value5" value = 600>600PSI</div>
<div class = "dropdown-content">
<option id = "db5_val1" onClick="reply_click(this.id)">Ox. Press</option>
<option id = "db5_val2" onClick="reply_click(this.id)">Pre-Inj. Press</option>
<option id = "db5_val3" onClick="reply_click(this.id)">Post-Inj. Press</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv6">
<div class="dropbtndiv6" id = "dropbtndiv6">
<button class = "dropbtn6" id = "dropbtn6">Pressure Transducer 2</button>
<div class = "read_value" id = "read_value6" value = 700>700PSI</div>
<div class = "dropdown-content">
<option id = "db6_val1" onClick="reply_click(this.id)">Ox. Press</option>
<option id = "db6_val2" onClick="reply_click(this.id)">Pre-Inj. Press</option>
<option id = "db6_val3" onClick="reply_click(this.id)">Post-Inj. Press</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv7">
<div class="dropbtndiv7" id = "dropbtndiv7">
<button class = "dropbtn7" id = "dropbtn7">Pressure Transducer 3</button>
<div class = "read_value" id = "read_value7" value = 800>800PSI</div>
<div class = "dropdown-content">
<option id = "db7_val1" onClick="reply_click(this.id)">Ox. Press</option>
<option id = "db7_val2" onClick="reply_click(this.id)">Pre-Inj. Press</option>
<option id = "db7_val3" onClick="reply_click(this.id)">Post-Inj. Press</option>
</div>
</div>
</div>
<div class = "dropdown" id = "dropbtndiv8">
<div class="dropbtndiv8" id = "dropbtndiv8">
<button class = "mass_readout-btn" id = "mass_readout-btn">Liquid Mass</button>
<div class = "read_value" id = "mass_read_value">50kg</div>
</div>
</div>
</div>
<div id="app" style = "width:200px;height:200px"></div>
<script type="text/babel">
let fill = require('./fillsystem2.png');
class App extends React.Component {
render() {
return (<p>Hello world</p>);
}
}
ReactDOM.render(
<App />,
document.getElementById('app')
);
</script>
</div>
<div class="plots module flex container row">
<div id="chartContainer1" class="chart1" style="width:100%;height:200px;"></div>
<div id="chartContainer2" class="chart2" style="width:100%;height:200px;"></div>
</div>
</div>
<div class="launch_controls module flex container column">
<button class="button2 full_height sub_module abort" id="abort">Abort</button>
<div class="button_group fuel sub_module">
<button class="button1" id="btn_dump">Dump</button>
<button class="button1" id="btn_fill">Fill</button>
<button class="button1" id="btn_vent">Vent</button>
</div>
<div class="button_group umbilical sub_module">
<button class="button1" id="btn_arm_umbilical">Arm Umbilical</button>
<button class="button1" id="btn_disconnect_umbilical">Disconnect<br>Umbilical</button>
</div>
<div class="button_group mass sub_module">
<button class="button1" id="btn_submit_mass">Submit Mass</button>
<form>
<input type="text" id="mass_target" placeholder="Desired Mass">
</form>
</div>
<div class="igniter sub_module">
<button class="button1 full_height disabled" id="btn_arm_igniter">Arm Igniter</button>
</div>
</div>
</div>
</body>
</html>
错误消息
Uncaught SyntaxError: Invalid or unexpected token vm.js:79
at new Script (vm.js:79)
at createScript (vm.js:251)
at Object.runInThisContext (vm.js:303)
at Module._compile (internal/modules/cjs/loader.js:660)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:704)
at Module.load (internal/modules/cjs/loader.js:602)
at tryModuleLoad (internal/modules/cjs/loader.js:541)
at Function.Module._load (internal/modules/cjs/loader.js:533)
at Module.require (internal/modules/cjs/loader.js:640)
at require (internal/modules/cjs/helpers.js:20)
Script @ vm.js:79
createScript @ vm.js:251
runInThisContext @ vm.js:303
Module._compile @ internal/modules/cjs/loader.js:660
Module._extensions..js @ internal/modules/cjs/loader.js:704
Module.load @ internal/modules/cjs/loader.js:602
tryModuleLoad @ internal/modules/cjs/loader.js:541
Module._load @ internal/modules/cjs/loader.js:533
Module.require @ internal/modules/cjs/loader.js:640
require @ internal/modules/cjs/helpers.js:20
(anonymous) @ Inline Babel script:2
run @ babel.js:61531
check @ babel.js:61597
loadScripts @ babel.js:61638
runScripts @ babel.js:61668
transformScriptTags @ babel.js:336
(anonymous) @ babel.js:327