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の公式のものを参考にしました。
{
"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>
になるようです。
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
を以下のように修正してください。
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
<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
無事コンパイルが通れば成功です。
終わりに
以上「vue-next(Vue.js 3.0-alpha) + TypeScript + Webpackの開発環境を構築する」でした。
この環境を使って、Vue 3.0の新機能を色々試していきたいです!