在 Visual Studio 的终端中使用 npm start 时出现错误答案

【问题标题】：while using npm start in the terminal of visual studio I get an error在 Visual Studio 的终端中使用 npm start 时出现错误
【发布时间】：2020-01-28 01:34:16
【问题描述】：

我正在使用带有 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
}

【问题讨论】：

欢迎您！该错误告诉您不能将import 语句放入内联脚本中。您需要将其放在另一个 .js 文件中。
所以不要使用内联脚本
Inlining ECMAScript Modules in HTML的可能重复
我从内联脚本中取出了它，这似乎可以解决问题！

标签： javascript html node.js

【解决方案1】：

本机支持模块 refer MDN docs

尝试将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>

【讨论】：

我刚刚尝试了这个

【解决方案2】：

如果是多行代码，您不能简单地忽略返回键。

如果您使用 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>

【讨论】：