¿Por qué aparece un error con la importación de React

Eugene:

Estoy aprendiendo React.js y me convertí en esta línea pura usando JavaScript convertidor de línea de Babel:

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

convirtió:

"use strict";


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

console.log(element)

Pero cuando lo ejecuto en WebStorm, consigo una excepción:

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

Silviu-Marian:

En primer lugar, vamos a dejar claro que WebStorm va a actuar como una envoltura alrededor de un intérprete de JS (cualquier intérprete que eligió) y el tubo de salida de cualquier volver a ti.

Me voy a quedar al nodo 12.xx para este ejemplo sobre la base de las importaciones de ESM de error que está recibiendo, pero también se puede ejecutar Chrome en modo sin cabeza , PhantomJS o cualquier otra cosa en realidad, aunque será algo de trabajo para la producción de tubería .

En segundo lugar, se necesita tener instalado reaccionar, ya sea a nivel mundial o accesible por esquema de resolución del módulo de nodo (node_modules como hermanos, o cualquier carpeta principal).

Por último, es necesario escoger una módulos estándar. Hay una oficial adecuado para la exploración, en la resolución del módulo (la importación de reaccionar) es diferente, y también la propia nodo, que tiene un montón de lectura alrededor de ella aquí . Puesto que estamos utilizando nodo, no podemos escoger el primero de ellos, pero sólo podemos emular a través de ESM o Babel .

La línea es de color gris con todo esto, pero todavía estamos en territorio de vainilla JS aquí bien.

Ahora, tenemos que decirle al intérprete que queremos estar en un ámbito de módulo con todo nuestro código, no envíe todas las exportaciones a lo global. En el navegador se trata <script type="module">, pero en el nodo que sea emular todo con ESM o Babel, o que haga lo siguiente:

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

Nótese aquí que la extensión de archivo necesita absolutamente ser MJS. Si no lo es, eso es un SyntaxError porque no podemos utilizar la declaración de importación fuera de un módulo.

Si elige esm, en mi opinión de que es un poco mejor, ya que también permite la .jsextensión:

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

---

Con toda la tarea ahora hecho aquí es el resumen de configuración WebStorm