为什么我在导入 React 时出错

Question

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

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

变成了：

"use strict";


import { React } from "react";
var element = React.createElement("div", {
    tabIndex: "0"
});

console.log(element)

但是当我在 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

Answer 1

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

根据您收到的 ESM 导入错误，我将坚持使用此示例的节点 12.x.x，但您也可以运行 Chrome in headless mode、phantomjs 或任何东西否则确实如此，尽管通过管道输出需要一些工作。

其次，您需要安装 React，可以是全局的，也可以是 node's module resolution scheme 可访问的（node_modules 作为同级文件夹，或任何父文件夹）。

最后，您需要选择一个模块标准。有 an official one suitable for the browser where module resolution (importing react) is different, and also node's own, which has plenty of reading around it over here. Since we're using node, we can't pick the first one, but can only emulate it via esm or babel.

所有这些都是灰色的，但我们仍然在 vanilla JS 领域。

现在，我们需要告诉解释器我们希望所有代码都在模块范围内，而不是将所有导出发送到全局。在浏览器中这是 <script type="module">，但在节点中我们要么用 esm 或 babel 模拟它，要么我们这样做：

"C:\Program Files\nodejs\node.exe" --experimental-modules C:\Users\me\.WebStorm2019.3\config\scratches\scratch_4.mjs

这里注意，文件扩展名一定要是mjs。如果不是，那就是 SyntaxError，因为我们不能在模块外使用 import 语句。

如果您选择 esm，在我看来会更好一些，因为它还允许 .js 扩展名：

"C:\Program Files\nodejs\node.exe" -r esm C:\Users\me\.WebStorm2019.3\config\scratches\scratch_4.js

现在所有的作业都完成了，这里是 WebStorm 的配置摘要

为什么我在导入 React 时出错

Why do I get an error with importing React

javascript

webstorm

reactjs

babeljs