taisablog.com

taisa's engineer blog

トップ > JavaScript > Nuxt.js v2.9のリリース情報とDiff

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

JavaScript

2019年8月20日にNuxt.jsのバージョンが2.8.1から2.9へがリリースされました。2019年9月19日時点ではバージョン2.9.2まであがっています。本投稿ではリリース内容と変更点が見れるように2.8.1から2.9.1のソースのDiffと変更されたファイル一覧を載せておきます。変更ファイル数は、examplesやtestを除くと約142ファイルでした。またバージョンが上がっただけ、関数にスペースが追加されただけのファイルも多く、それを除くともっと少なくなります。
本リリースでの大きな変更はImportant Notesの中でもTypescript関連の変更が個人的には大きいと思います。Nuxt Typescriptの導入やMigrationはリリースノートにあるページの Setup、Migration 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 ...

examplesとtestを除いた変更ファイル一覧

  • .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-appでNuxtプロジェクトを新規作成する
※ この時点ではTypescriptのソースがある場合は起動できませんがなにもしなければ起動します。

npx create-nuxt-app 
cd

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

yarn add --dev @nuxt/typescript-build
# OR
npm install --save-dev @nuxt/typescript-build

nuxt.config.jsのbuildModulesに@nuxt/typescript-buildを追記する

// nuxt.config.js
buildModules: ['@nuxt/typescript-build']

tsconfig.jsonを新規作成する

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

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

ERROR in /Users/tt-dev/src/taisa831/nuxt-typescript/components/TodoList.vue(47,22):                                                                                                                                                           nuxt:typescript 11:06:14
47:22 Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

// tsconfig.json
  "compilerOptions": {
    "experimentalDecorators": true
  }

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

npm run dev

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

参考

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