JavaScript 中 import 指令的正确用法答案

【问题标题】：The correct usage of import directive in JavaScriptJavaScript 中 import 指令的正确用法
【发布时间】：2020-09-29 22:21:53
【问题描述】：

我需要什么来完成以下工作？

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <script type="text/babel">
    import React from 'react';
  </script>
</body>
</html>

在其当前形式中会产生错误：

Inline Babel script:2 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:14
    at run (babel.js:61531)
    at check (babel.js:61597)
    at loadScripts (babel.js:61638)
    at runScripts (babel.js:61668)
    at transformScriptTags (babel.js:336)
    at babel.js:327

这个表格也不行：

import React from 'react.production.min';

【问题讨论】：

这能回答你的问题吗？ Do I need require js when I use babel? --- 虽然我不知道这个问题是否涉及非转译代码。
由于您不在模块上下文中，您可以直接使用React，因为它是通过直接链接脚本在全局对象上定义的。
@evolutionxbox 该链接绝对是有价值的信息，但我认为它不能回答问题。
我已将其更改为堆栈 sn-p。 ????
好的，现在我知道 stack sn-ps 是 StackOverflow 上的一种格式，而不是一些可以帮助我调试 JavaScript 的浏览器功能。

标签： javascript reactjs

【解决方案1】：

如果您正在使用客户端 babel 构建 React 应用程序：您不要使用import。

import React from 'react'; 被您的 HTML 文档中的前两个 <script> 元素替换。

如果你想在 React 中使用模块，你最好选择 the React tutorial 中的“设置选项 2”，并在 构建时 构建一个使用 babel 的本地开发环境，而不是在运行时。

【讨论】：

因此，我得出结论，示例中的每个包含都属于服务器端 Javascript。对吗？
@paul 我赞成您的评论，您可以使用仅用于本地工具链的 node.js 开发仅客户端应用程序。构建完成后，您可以将生成的静态文件移动到 CDN 和瞧，根本不需要节点服务器！
请理解我。我刚开始尝试 React.js，所有第一个示例都需要使用 Node.js，但是理所当然地，这些信息大部分都被省略了。当他们提供示例时，他们没有提及在哪一侧（服务器/客户端）应用它们。我从未使用过服务器端 JS。
@Paul 我完全理解你，我也去过那里！我认为当直接进入特定框架时，这种感觉会更糟，因为文档和大多数教程都假设您已经熟悉生态系统和/或其他框架。祝你好运！