在 Visual Studio 的終端中使用 npm 啟動時出現錯誤

Question

我正在使用帶有 Node.js 的 JavaScipt ES6。 我正在使用視覺工作室代碼。 當我運行 npm start 時出現此錯誤：錯誤是：

×  C:\Users\markp\source\repos\bioinvisionTest\index.html:1:31: Imports and requires are not supported inside inline <script> tags yet

在其他程序中，導入有效。 這個不行。 程序中的所有內容都是這樣的：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="demo"></div>    
  <script>
    import TestComponent from "./components/Testcomponent"
  </script>     
</body>
</html>

在 components 文件夾中有一個名為 Testcomponent js 的文件，其中包含：

function TestComponent() {
  console.log("test component js")
}

export default {
  TestComponent
}

Answer 1

如果它是多行代碼，您不能簡單地忽略返回鍵。

如果您使用 Creaet-react-app 作為生成器，那么我建議您使用 APP.js 作為基礎並暫時將您的組件注入該文件中。 稍后您可以重新設計。

如果您只使用 HTML 和 JS 文件，那么您應該在 index.html 文件中導入 react 和 react-dom 庫。

一頁 React App，放入您的 html 文件中。

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
    render() {
        return (<p>Hello world</p>);
    }
}
ReactDOM.render(
    <Greeting />,
    document.getElementById('root')
);
</script>

Answer 2

模塊是原生支持的，請參閱 MDN 文檔

嘗試將type="module"添加到您的腳本標簽。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="demo"></div>

  <script type="module">
  import TestComponent from "./components/Testcomponent"




  </script> 



</body>
</html>

在 Visual Studio 的終端中使用 npm 啟動時出現錯誤

問題描述

2 個解決方案

解決方案1
0 2019-09-27 21:08:25

解決方案2
-1 2019-09-27 17:58:20

在 Visual Studio 的終端中使用 npm 啟動時出現錯誤

問題描述

2 個解決方案

解決方案1 0 2019-09-27 21:08:25

解決方案2 -1 2019-09-27 17:58:20

解決方案1
0 2019-09-27 21:08:25

解決方案2
-1 2019-09-27 17:58:20