ES6でデバッグする

問題

  • VSCodeをデフォルトで使うと、ES6のJSをデバッグ実行するとSyntaxError: Unexpected token importのようなエラーが起きる。

解決方法

bable-cliとbabel-preset-envのインストール

 npm install -D babel-cli
 npm install -D babel-preset-env

launch.jsonの設定

 {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch via Babel",
      "program": "${workspaceRoot}\\index.js",
      "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\babel-node",
    }
  ]
 }
  • プロジェクトフォルダ直下の.vscode/launch.jsonを開く。
  • (存在しない場合は、VSCodeを起動して、左のアクティビティからデバッグビューを選び、歯車アイコンをクリックする)
  • runtimeExecutableの項目を追加する。

.babelrcの設定

 {
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
 }
  • プロジェクトフォルダ直下の.babelrcを上のようにする。

注意

  • babel-nodeでエラーが起きた場合は、いったんnode_modulesを消して、babelをインストールしなおすといいかも。

参考


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS

Last-modified: 2019-01-20 (日) 17:56:08