Javascript 为什么导入React时出错

我正在学习React.js，我使用Babel的在线转换器将这行代码转换为纯JavaScript：

const element = <div tabIndex="0"></div>;

但当我在Webstorm中运行它时，我得到一个例外：

import { React } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

---

首先，让我们明确WebStorm将充当JS解释器（您选择的任何解释器）的包装器，并通过管道将任何输出返回给您

在这个示例中，我将根据您得到的ESM imports错误继续使用node 12.x.x，但是您也可以运行phantomjs或其他任何东西，尽管管道输出需要一些工作

其次，您需要安装react，可以是全局的，也可以是可访问的（节点_模块作为同级，或者任何父文件夹）

最后，您需要选择一个模块标准。它适用于模块分辨率（导入react）不同的浏览器，也适用于节点本身的浏览器，因为节点本身有大量的读数。因为我们使用的是node，所以无法选择第一个节点，只能通过或来模拟它

这条线是灰色的，但我们仍然在这里

现在，我们需要告诉解释器，我们希望所有代码都在模块范围内，而不是将所有导出发送到全局。在浏览器中，这是

，但在节点中，我们要么用esm或babel来模拟这一切，要么这样做：

“C:\Program Files\nodejs\node.exe”--实验模块C:\Users\me\.webstor2019.3\config\scratch\scratch\u 4.mjs

请注意，这里的文件扩展名绝对需要是mjs。如果不是，那就是语法错误，因为我们不能在模块外使用import语句

如果您选择

esm

，我认为这会更好，因为它还允许

.js

扩展：

“C:\Program Files\nodejs\node.exe”-r esm C:\Users\me\.webstore2019.3\config\scratch\scratch\u 4.js

---

完成所有作业后，这里是WebStorm的配置摘要

---

如何将javascript导入html？在html文件中，尝试在脚本中使用type=“module”。Javascript可以在浏览器中运行，也可以与Node.js一起运行。如果您想从webstorm中使用Node.js运行.js，请右键单击.js文件并选择run；

import

关键字与所谓的。默认情况下，节点使用CommonJS stlye模块系统（

require

，

module.exports

）。如果您想在nodejs中使用ES模块，则需要Node版本12或更高版本。在节点12中，您需要将WebStorm配置为将标志

--实验模块
传递给节点。对于节点13或更高版本，请参见。谢谢，这很有效。对于像我这样的新手来说，只有一件事是安装esm模块，但这只是一件小事
import { React } from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47