#author("2019-01-20T17:54:15+09:00","default:ryuichi","ryuichi")
#author("2019-01-20T17:56:08+09:00","default:ryuichi","ryuichi")
* ES6でデバッグする [#b1c5f0d9]

** 問題 [#edf772d4]

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


** 解決方法 [#x531ecd8]

*** bable-cliとbabel-preset-envのインストール [#z43a1884]

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

*** launch.jsonの設定 [#b89eb8c8]

 {
  "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の設定 [#i74ad0f6]
*** .babelrcの設定 [#e11cf014]

 {
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
 }

- プロジェクトフォルダ直下の.babelrcを上のようにする。

** 注意 [#jdbbedbb]

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

** 参考 [#m3ddf2b8]

- https://michele.io/nodemon-babel-vscode/
- https://stackoverflow.com/questions/41948471/how-to-debug-nodejses6-code-in-vscode-editor
- https://medium.com/@katopz/how-to-debug-es6-nodejs-with-vscode-8d00bd6c4f94

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