108
89

More than 3 years have passed since last update.

vue-next(Vue.js 3.0 wip)+ TypeScript + webpackでの開発環境を構築する

Last updated at Posted at 2020-02-02

2020年のQ1にVue.js 3.0のリリースが予告されています。

公開に先駆けてVue 3.0の新機能を試したいと思い、TypeScript + Webpackでの開発環境を整えてみたのでまとめます。

(2020/06/04 追記)
vue-cli-nextが出ているようです。
https://github.com/vuejs/vue-cli-plugin-vue-next

(2020/02/04 追記)
この記事で作った環境を使いVue3.0の新機能Suspense, Teleportを試しました。こちらも参考までに。

内容

vue-nextのREADME.mdで紹介されている以下リポジトリを参考に、Webpack版のVue.js 3.0の開発環境をTypeScriptに対応させました。

今回の動作コードはこちらにあります。
https://github.com/kawamataryo/vue-next-ts-webpack-preview

開発環境構築

以下作業は、
https://github.com/vuejs/vue-next-webpack-preview
をclone、またはforkしたリポジトリで行って下さい。

git clone https://github.com/vuejs/vue-next-webpack-preview.git

1. 依存モジュールの追加

TypeScriptのコンパイルに必要なtypescriptts-loaderを追加します

yarn add -D typescript ts-loader

2. tsconfig.jsonの追加

TypeScriptの設定ファイル ts-config.jsonを追加します。
vueの公式のものを参考にしました。

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

3. shims-vue.d.tsの追加

.vueファイルのimportでも型解決が出来るように、shims-vue.d.tsを追加します。
Vue 2系までの書き方で書いていたらコンパイルエラーで詰まったのですが、こちらのissueに助けられました。
https://github.com/vuejs/vue-next-webpack-preview/issues/5
(2020/06/05 型エラーが出ていたので修正しました)

componentの型はReturnType<typeof defineComponent>になるようです。

src/shims-vue.d.ts
declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}

4 webpack.config.jsonの修正

main.jsからmain.tsへエントリーポイントを変更し、さらにts-loaderを通すようにrulesを修正します。
webpack.config.jsonを以下のように修正してください。

webpack.config.json
module.exports = (env = {}) => ({
  mode: env.prod ? 'production' : 'development',
  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
- entry: path.resolve(__dirname, './src/main.js'),
+ entry: path.resolve(__dirname, './src/main.ts'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'
  },
  resolve: {
    alias: {
      // this isn't technically needed, since the default `vue` entry for bundlers
      // is a simple `export * from '@vue/runtime-dom`. However having this
      // extra re-export somehow causes webpack to always invalidate the module
      // on the first HMR update and causes the page to reload.
      'vue': '@vue/runtime-dom'
    }
  },
  module: {
    rules: [
+     {
+       test: /\.ts$/,
+       exclude: /node_modules/,
+       loader: 'ts-loader',
+       options: {
+         appendTsSuffixTo: [/\.vue$/]
+       }
+     },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.png$/,
        use: {
          loader: 'url-loader',
          options: { limit: 8192 }
        }
      },
...

5. main.js, App.vueをTypeScript化

ここまでで下準備が整ったので、main.jsと、App.vueを実際にTypeScript化します。

main.jsは拡張子をtsに変更するだけです。

mv src/main.js src/main.ts

App.vue<script>lang="ts"を追記してdefineComponent()をexportするように修正します。

※ モジュールとして公開されているvue/composition-apiではcreateComponent()だったのですが名前が変更されたようです。 https://github.com/vuejs/vue-next/pull/549

src/App.vue
<template>
  <img src="./logo.png">
  <h1>Hello Vue 3!</h1>
  <button @click="inc">Clicked {{ count }} times.</button>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const inc = () => {
      count.value++
    }

    return {
      count,
      inc
    }
  }
})
</script>

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

以上で、TypeScript化の完了してるはず。
実際にコンパイルしてみましょう。

yarn dev

無事コンパイルが通れば成功です。

スクリーンショット 2020-02-02 17.39.31.png

終わりに

以上「vue-next(Vue.js 3.0-alpha) + TypeScript + Webpackの開発環境を構築する」でした。
この環境を使って、Vue 3.0の新機能を色々試していきたいです!

108
89
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
108
89