javascript - 为什么我导入 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适合模块解析(导入react)不同的浏览器，也适合node自己的浏览器，它有大量的阅读内容over here 。由于我们使用的是节点，因此我们无法选择第一个，而只能通过 esm 来模拟它或babel .

这条线是灰色的，但我们仍然处于普通 JS 领域，好吧。

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

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

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

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

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

---

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