たいさブログ

taisa's engineer blog

JavaScript

Nuxt.js v2.9のリリース情報とDiff

投稿日:


2019年8月20日にNuxt.jsのバージョンが2.8.1から2.9へがリリースされました。2019年9月19日時点ではバージョン2.9.2まであがっています。本投稿ではリリース内容と変更点が見れるように2.8.1から2.9.1のソースのDiffと変更されたファイル一覧を載せておきます。変更ファイル数は、examplestestを除くと約142ファイルでした。またバージョンが上がっただけ、関数にスペースが追加されただけのファイルも多く、それを除くともっと少なくなります。

本リリースでの大きな変更はImportant Notesの中でもTypescript関連の変更が個人的には大きいと思います。Nuxt Typescriptの導入やMigrationはリリースノートにあるページの SetupMigration from Nuxt 2.8 を見れば簡単に行えます。(本記事の一番下でも試しにやってみました。)

リリースノート

nuxtjs.org

Due to a known problem (webpack/webpack#8656, #4869, #4839) users of npm should either remove package-lock.json and reinstall before upgrade or use npm update acorn –depth 20 && npm dedupe after upgrading to 2.4.0. users should have no problems but removing yarn.lock still recommended before the upgrade process.

Diff

v2.8.1からv2.9.2のDiffをつくってみました。

v2.9.2 diff by taisa831 · Pull Request #1 · taisa831/nuxt.js

Types of changes Bug fix (a non-breaking change which fixes an issue) New feature (a non-breaking change which adds functionality) Breaking change (fix or feature that would cause existing functionality to change) Description Checklist: My change requires a change to the documentation. I have updated the documentation accordingly.

変更ファイル

nuxt.js v2.8.1 -> v2.9.2

examples examples,examples/async-component-injection/pages/_slug.vue examples,examples/async-data/pages/posts/_id.vue examples,examples/async-data/pages/posts/index.vue …

examplestestを除いた変更ファイル一覧

  • .circleci/config.yml
  • .eslintignore
  • .eslintrc.js
  • README.md
  • babel.config.js
  • distributions/nuxt-start/package.js
  • distributions/nuxt-start/package.json
  • distributions/nuxt-ts/README.md
  • distributions/nuxt-ts/bin/nuxt-ts.js
  • distributions/nuxt-ts/package.js
  • distributions/nuxt-ts/package.json
  • distributions/nuxt/README.md
  • distributions/nuxt/package.js
  • distributions/nuxt/package.json
  • jest.config.js
  • lerna.json
  • package.json
  • packages/babel-preset-app/README.md
  • packages/babel-preset-app/package.json
  • packages/babel-preset-app/src/index.js
  • packages/babel-preset-app/src/polyfills-plugin.js
  • packages/builder/package.json
  • packages/builder/src/builder.js
  • packages/builder/src/context/build.js
  • packages/builder/src/context/template.js
  • packages/builder/src/ignore.js
  • packages/cli/package.json
  • packages/cli/src/command.js
  • packages/cli/src/commands/build.js
  • packages/cli/src/commands/dev.js
  • packages/cli/src/commands/generate.js
  • packages/cli/src/commands/help.js
  • packages/cli/src/commands/index.js
  • packages/cli/src/commands/start.js
  • packages/cli/src/imports.js
  • packages/cli/src/index.js
  • packages/cli/src/list.js
  • packages/cli/src/options/common.js
  • packages/cli/src/options/index.js
  • packages/cli/src/options/server.js
  • packages/cli/src/run.js
  • packages/cli/src/setup.js
  • packages/cli/src/utils/banner.js
  • packages/cli/src/utils/config.js
  • packages/cli/src/utils/formatting.js
  • packages/cli/src/utils/index.js
  • packages/cli/src/utils/memory.js
  • packages/cli/src/utils/typescript.js
  • packages/config/index.d.ts
  • packages/config/package.json
  • packages/config/src/config/_app.js
  • packages/config/src/config/_common.js
  • packages/config/src/config/build.js
  • packages/config/src/config/index.js
  • packages/config/src/options.js
  • packages/config/types/build.d.ts
  • packages/config/types/env.d.ts
  • packages/config/types/fetch.d.ts
  • packages/config/types/generate.d.ts
  • packages/config/types/globals.d.ts
  • packages/config/types/head.d.ts
  • packages/config/types/hooks.d.ts
  • packages/config/types/index.d.ts
  • packages/config/types/loading.d.ts
  • packages/config/types/module.d.ts
  • packages/config/types/plugin.d.ts
  • packages/config/types/render.d.ts
  • packages/config/types/router.d.ts
  • packages/config/types/server-middleware.d.ts
  • packages/config/types/server.d.ts
  • packages/config/types/vue-configuration.d.ts
  • packages/config/types/watchers.d.ts
  • packages/core/package.json
  • packages/core/src/hookable.js
  • packages/core/src/module.js
  • packages/core/src/nuxt.js
  • packages/core/src/resolver.js
  • packages/generator/package.json
  • packages/generator/src/generator.js
  • packages/server/package.json
  • packages/server/src/context.js
  • packages/server/src/jsdom.js
  • packages/server/src/listener.js
  • packages/server/src/middleware/error.js
  • packages/server/src/middleware/nuxt.js
  • packages/server/src/middleware/timing.js
  • packages/server/src/server.js
  • packages/typescript/package.js
  • packages/typescript/package.json
  • packages/typescript/src/index.js
  • packages/utils/package.json
  • packages/utils/src/cjs.js
  • packages/utils/src/context.js
  • packages/utils/src/lang.js
  • packages/utils/src/locking.js
  • packages/utils/src/modern.js
  • packages/utils/src/resolve.js
  • packages/utils/src/route.js
  • packages/utils/src/serialize.js
  • packages/utils/src/task.js
  • packages/utils/src/timer.js
  • packages/vue-app/index.d.ts
  • packages/vue-app/package.json
  • packages/vue-app/src/index.js
  • packages/vue-app/template/App.js
  • packages/vue-app/template/client.js
  • packages/vue-app/template/components/no-ssr.js
  • packages/vue-app/template/components/nuxt-build-indicator.vue
  • packages/vue-app/template/components/nuxt-child.js
  • packages/vue-app/template/index.js
  • packages/vue-app/template/router.js
  • packages/vue-app/template/router.scrollBehavior.js
  • packages/vue-app/template/utils.js
  • packages/vue-app/types/index.d.ts
  • packages/vue-app/types/process.d.ts
  • packages/vue-app/types/vue.d.ts
  • packages/server/src/middleware/nuxt.js
  • packages/server/src/middleware/timing.js
  • packages/server/src/server.js
  • packages/typescript/package.js
  • packages/typescript/package.json
  • packages/typescript/src/index.js
  • packages/utils/package.json
  • packages/utils/src/cjs.js
  • packages/utils/src/context.js
  • packages/utils/src/lang.js
  • packages/utils/src/locking.js
  • packages/utils/src/modern.js
  • packages/utils/src/resolve.js
  • packages/utils/src/route.js
  • packages/utils/src/serialize.js
  • packages/utils/src/task.js
  • packages/utils/src/timer.js
  • packages/vue-app/index.d.ts
  • packages/vue-app/package.json
  • packages/vue-app/src/index.js
  • packages/vue-app/template/App.js
  • packages/vue-app/template/client.js
  • packages/vue-app/template/components/no-ssr.js
  • packages/vue-app/template/components/nuxt-build-indicator.vue
  • packages/vue-app/template/components/nuxt-child.js
  • packages/vue-app/template/index.js
  • packages/vue-app/template/router.js
  • packages/vue-app/template/router.scrollBehavior.js
  • packages/vue-app/template/utils.js
  • packages/vue-app/types/index.d.ts
  • packages/vue-app/types/process.d.ts
  • packages/vue-app/types/vue.d.ts
  • packages/vue-renderer/package.json
  • packages/vue-renderer/src/renderer.js
  • packages/vue-renderer/src/renderers/base.js
  • packages/vue-renderer/src/renderers/modern.js
  • packages/vue-renderer/src/renderers/spa.js
  • packages/vue-renderer/src/renderers/ssr.js
  • packages/webpack/package.json
  • packages/webpack/src/builder.js
  • packages/webpack/src/config/base.js
  • packages/webpack/src/config/client.js
  • packages/webpack/src/config/modern.js
  • packages/webpack/src/config/server.js
  • packages/webpack/src/plugins/vue/client.js
  • packages/webpack/src/plugins/vue/cors.js
  • packages/webpack/src/plugins/vue/modern.js
  • packages/webpack/src/plugins/vue/server.js
  • packages/webpack/src/plugins/warning-ignore.js
  • packages/webpack/src/utils/perf-loader.js
  • packages/webpack/src/utils/postcss.js
  • packages/webpack/src/utils/style-loader.js
  • renovate.json
  • scripts/changelog.js
  • scripts/dev.js
  • scripts/link.js
  • scripts/package.js
  • scripts/rollup.config.js

Nuxt Typescriptプロジェクトを新規作成する

npx create-nuxt-appNuxtプロジェクトを新規作成する
※ この時点ではTypescriptのソースがある場合は起動できませんがなにもしなければ起動します。

分離されて新しくなったnuxt/typescript-buildをインストールする

nuxt.config.jsbuildModules@nuxt/typescript-buildを追記する

tsconfig.jsonを新規作成する

このまま起動すると以下のように怒られる場合があるのでtsconfig.jsoncompilerOptions"experimentalDecorators"を追記する

起動するとTypescriptのコードが入っていても問題なく表示されます🎉

※ 既存プロジェクトからのMigration方法は以下です。
https://typescript.nuxtjs.org/migration.html

参考

https://typescript.nuxtjs.org/guide/setup.html#configuration


-JavaScript

執筆者:

関連記事

「はじめてのフロントエンド開発」という共著本を出版しました

『React,Angular,Vue.js,React Nativeを使って学ぶ はじめてのフロントエンド開発』という共著本を2018年5月9日に出版しました。 React、Angular、Vue.j …

node-nightlyを使ってwebpackをデバッグする

webpackに限らずだけどnode-nightlyを使うと簡単にデバッグすることができる Debugging When contributing to the core repo, writing …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …

Firebase Cloud Firestore 使い方の勘ドコロ

FirebaseのCloud Firestoreを扱う際、本家ドキュメントが充実していて検索すればすぐに出てくるのでそれほど困ることはありません。ただ、最初の入りとしてFiresotreのDocume …

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1. …

Top