Nuxt.js v2.5.0がリリースされた(v2.5.1について追記)

## Nuxt.js v2.5.0 リリース

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">🎁 Nuxt.js v2.5.0 is out 🎁<br><br>💅 DX: Loading screen, TypeScript &amp; nuxt -o<br>📦 Build: Babel 7.4 &amp; Core-js 3<br>🚀 Performance improvements<br>🐞 30+ bug fixes<br>💚 30 contributors for this release<br><br>Read more on <a href="https://t.co/zmSCcaO3oh">https://t.co/zmSCcaO3oh</a> <a href="https://t.co/PL0etAy1DM">pic.twitter.com/PL0etAy1DM</a></p>&mdash; Nuxt.js (@nuxt_js) <a href="https://twitter.com/nuxt_js/status/1108728812945227776?ref_src=twsrc%5Etfw">2019年3月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Nuxt.js v2.5.0がリリースされました。大きな変更点をGithubから抜粋します。


### Typescript DX
> No longer needed to install nuxt-ts for typescript support. Nuxt.js officially supports TS by installing @nuxt/typescript. Please see [#5079](https://github.com/nuxt/nuxt.js/pull/5079) for reasons behind such migration.

TypeScriptを使う場合に `nuxt-ts` を使っていたと思うんですが、`@nuxt/typescript`を追加するだけでNuxt.jsで正式にサポートされるようになりました。また、空のtslint.jsonを配置した状態でnuxtを起動させると、自動で標準の設定が記述されます。
このtslint.jsonには`noImplicitAny: false`と`allowJs: true`などが入っているので、JavaScriptからTypeScriptに移行する場合に標準のままで有利に行えます。tsconfig.jsonは以下のものが自動生成されます。

```json:tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/vue-app"
    ]
  }
}
```

### Babel
> Babel 7.4, Core-js v3, and Object.assign polyfill for better browser support.

#### 2019年3月26日15時46分追記
https://github.com/nuxt/nuxt.js/pull/5317
ElementUIやFirebaseが動かなくなったりしたので、 v2.5.1でcore-jsが3から2.6に戻されました。


### Stability
> More than 30 fixes, refactors and performance improvements.


### Open in Browser

`nuxt -o`と実行する事で、以下のようにブラウザでビルド状況が確認できるようになりました。

![](https://user-images.githubusercontent.com/904724/54605661-12812680-4a4a-11e9-92e0-e7d7ed3a7c66.gif)

### .nuxtignore

> Before v2.5, you were able to ignore files through an ignore prefix. As using the prefix over and over, ignoring files (and implementing custom structures) was a bit tedious on the long run. We came up with something more sophisticated: A .nuxtignore file. Following the same specs as a .eslintignore or a .gitignore file, you can now define what files or folders to ignore through a .nuxtignore file in your project root.

.nuxtignoreが追加されたため、今までignorePrefixを付ける事でnuxtから除外していたファイルを、.gitignoreや.eslintignoreと同じ記法で管理することができるようになりました。詳細は[.nuxtignoreのドキュメント](https://nuxtjs.org/api/configuration-ignore#-nuxtignore)を参照してください。

### [重要]マイグレーション

### Programmatic API / Middleware
> If not already done, please explicitly call nuxt.ready() after new Nuxt(). nuxt.ready() was always async, but not awaiting the function call has now a severe impact.

nuxt.ready()が常に非同期でPromiseを返すようになったため、awaitで待つ必要があります。

```diff
   const nuxt = new Nuxt(config)
++ await nuxt.ready()
```


### TypeScript
> Please replace nuxt-ts dependency and use nuxt + @nuxt/typescript. (Also nuxt-ts-edge to nuxt-edge + @nuxt/typescript-edge for edge users)

`nuxt-ts`を`nuxt`と`@nuxt/typescript`に置き換えてください。

```diff:package.json
{
--  "nuxt-ts": "^2.4.2"
++  "@nuxt/typescript": "^2.5.0"
++  "nuxt": "^2.5.0"
}
```

> Configuration API to customize/disable type checking has been moved from build.useForkTsChecker to build.typescript.typeCheck. Please see #5079 for more details.

型チェックの有無を切り替える設定が以下のように移動しました。

```diff
build: {
-- useForkTsChecker: false // or ForkTsChecker options
++ typescript : {
++   typeCheck: false // or ForkTsChecker options
++ }
}
```

## v2.4.5→v2.5.0のマイグレーションでハマったところ(というかv2.5.0のバグ)

### `@nuxt/config`のtypesが壊れてる(v2.5.1で修正済み)
`nuxt.config.ts`でNuxtConfigurationを読み込んだところ

```
 ERROR  ERROR in 
apps/node_modules/@nuxt/config/types/render.d.ts
14:10 Module '"./node_modules/@nuxt/config/types"' has no exported member 'NuxtConfigurationServerMiddleware'.
    12 | import { ServeStaticOptions } from 'serve-static'
    13 | import { BundleRendererOptions } from 'vue-server-renderer'
  > 14 | import { NuxtConfigurationServerMiddleware } from './index'
       |          ^
    15 |
    16 | export interface NuxtConfigurationRender {
    17 |   bundleRenderer?: BundleRendererOptions
```

とのことでした。

fix(ts): wrong export used in render.d.ts (#5309) · nuxt/nuxt.js@e67b298 
https://github.com/nuxt/nuxt.js/commit/e67b2982180d26299e0f2eb6a8680ca8720331c3

修正されてdevelopにマージされたのでそのうち直ると思います。今のところは型を貼らずに対応で。

#### 2019年3月22日21時57分追記
v2.5.1で修正されました。

### `nuxt {build|generate}`でエラー(v2.5.1で修正済み)

```
 ERROR  apps/node_modules/proper-lockfile/lib/lockfile.js:121
                        new Error('Unable to update lock within the stale threshold'),
                        ^


 ERROR  Error: Unable to update lock within the stale threshold                                                             05:07:21
    at options.fs.stat (apps/node_modules/proper-lockfile/lib/lockfile.js:121:25)
    at apps/node_modules/graceful-fs/polyfills.js:285:20
    at FSReqWrap.oncomplete (fs.js:153:5)

```

feat: lock project during build or generate by pimlie · Pull Request #4985 · nuxt/nuxt.js 
https://github.com/nuxt/nuxt.js/pull/4985

Nuxt.js v2.5.0からbuild時にファイルにlockをかける機能が追加されたようです。私の環境ではどうやってもエラーが出るので諦めてコマンド実行時に`--no-lock`オプションを付与して回避しました。

#### 2019年3月26日15時49分追記
https://github.com/nuxt/nuxt.js/pull/5320
v2.5.1でlockに関するエラーは`fatal`から`warn`に引き下げられました。いきなり厳格なチェックを実装したのは厳しかったようです。


## まとめ
Nuxt.js v2.5.0リリースでついに`nuxt-ts`を使わなくてもTypeScriptの恩恵がサーバーサイドでも得られるようになり、既存プロジェクトのTS化もよりやりやすくなると思います。是非試してみてください！