私はReact.jsを学んでいると私はバベルのオンラインコンバータを使用して、純粋な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
まず、聞かせてのは、それはWebStormはあなたに任意の出力バックJSインタプリタ(あなたが選択した任意のインタプリタ)のラッパーとのパイプとして動作するように起こっていることが明らかになります。
私はあなたが取得しているエラーESMの輸入に基づいて、この例のノード12.xxに固執するつもりですが、あなたも実行することができますヘッドレスモードでChromeを、それがパイプ出力にいくつかの作業になりますが、本当に、phantomjsまたは何かを。
第二に、あなたは、グローバルに、またはアクセスすることにより、反応インストールされている必要がありますノードのモジュール解決スキーム(兄弟としてnode_modules、または任意の親フォルダ)。
最後に、あなたは標準モジュールを選択する必要があります。あります公式の1、その周りに読んでたくさんの持つモジュール解像度(インポートが反応)ブラウザに適し異なり、また、ノード自身、こっちは。我々はノードを使用しているので、我々は最初のものを選ぶことはできませんが、唯一経由して、それをエミュレートすることができますESMまたはバベル。
行はすべて、このグレーですが、我々はここで大丈夫バニラJSの領土ではまだです。
今、我々は、我々はすべて私たちのコードでモジュールスコープになりたいというインタプリタを伝えるグローバルにすべての輸出を送信しないようにする必要があります。ブラウザでは、これはある<script type="module">
が、ノードに、我々はどちらかESMかバベルでそれすべてをエミュレートする、または私たちは、この操作を行います。
"C:\Program Files\nodejs\node.exe" --experimental-modules C:\Users\me\.WebStorm2019.3\config\scratches\scratch_4.mjs
ファイルの拡張子は絶対にMJSにする必要があることをここに注意してください。そうでない場合は、我々はモジュールの外にimportステートメントを使用することはできませんので、それはにSyntaxErrorです。
あなたが選択した場合はesm
、それもできますので、少しはましだ私の意見では.js
拡張子を:
"C:\Program Files\nodejs\node.exe" -r esm C:\Users\me\.WebStorm2019.3\config\scratches\scratch_4.js
すべてでは今ここで行わ宿題はWebStormのための構成の概要であります