More than 5 years have passed since last update.

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

Last updated at2020-06-05Posted 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のコンパイルに必要なtypescriptとts-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

declaremodule"*.vue"{import{defineComponent}from"vue";constcomponent:ReturnType<typeofdefineComponent>;exportdefaultcomponent;}

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><imgsrc="./logo.png"><h1>Hello Vue 3!</h1><button@click="inc">Clicked{{count}} times.</button></template><scriptlang="ts">import{ref,defineComponent}from'vue'exportdefaultdefineComponent({setup(){constcount=ref(0)constinc=()=>{count.value++}return{count,inc}}})</script><stylescoped>img{width:200px;}h1{font-family:Arial,Helvetica,sans-serif;}</style>

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

yarn dev

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

終わりに

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

108

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Movatterモバイル変換