Nuxtを使用したVue開発に関する動画を視聴していた際、NuxtプロジェクトではES6のimport構文が利用できないという記述があった。その際の対応策として以下の手順が紹介されていた：

1. package.jsonに以下の設定を追加する：

"scripts": {
  "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
  "build": "nuxt build",
  "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "test": "jest"
}

2. ルートディレクトリに.babelrcファイルを作成（既存の場合は編集）

内容は以下の通り：

{
  "presets": ["es2015"]
}

3. babel-preset-es2015をインストール

npm install babel-preset-es2015

4. npm run devを再実行

この動画での解決方法は上記4ステップであった。文書執筆時点でのネット上の情報も同様のアプローチが主流だった。

しかし重要な変更点が発覚！ 2019年1月現在、従来のbabel-preset-es2015は非推奨となり、代わりにbabel-preset-envまたは@babel/preset-envが使用されるようになっている。現在は後者の@babel/preset-envが推奨されている。

以下に、@babel/preset-envを使ってNuxtプロジェクトでimport構文を有効にする方法を示す。

1. 必要なパッケージをインストール

まだインストールしていない以下の4つのパッケージを追加する：

npm install @babel/cli @babel/core @babel/preset-env @babel/node -D

すでにインストール済みのパッケージについては、package.json内の"devDependencies"セクションを確認するとよい。

@babel/cliとbabel-cliの違いについて補足：

@babel/cliはバージョン7.0以降の命名規則であり、babel-cliはそれ以前のものです。図のようにバージョン7以降では@babelプレフィックスがつくパッケージ群を使用する必要がある。

Babel 7.x以前ではbabel-nodeはbabel-cliパッケージでインストール可能だったが、7.x以降ではモジュールが分割され、別途@babel/nodeをインストールする必要がある。

2. .babelrcファイルの更新

{
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

3. package.jsonの修正

以下のコードブロックで赤字で示した箇所を変更する：

"scripts": {
  "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node --presets @babel/env",
  "build": "nuxt build",
  "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node --presets @babel/env",
  "generate": "nuxt generate",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "test": "jest"
}

4. npm run devを実行すると、プロジェクトが正常に起動することが確認できる。

これは当初の4ステップと同じだが、バージョンアップのみの差異である。