2020년 Q1에 Vue.js 3.0의 출시가 예고되었습니다.

공개에 앞서 Vue 3.0의 새로운 기능을 시도하고 싶고, TypeScript + Webpack에서의 개발 환경을 정리해 보았으므로 정리합니다.

(2020/06/04 추가)
vue-cli-next가 나오는 것 같습니다.
htps : // 기주 b. 코 m / ゔ js / ゔ え c ぃ - p

(2020/02/04 추가)
이 기사에서 만든 환경을 사용하여 Vue3.0의 새로운 기능 Suspense, Teleport를 시도했습니다. 이쪽도 참고까지.

Vue.js 3.0의 새로운 기능을 사용해보십시오. ~ Suspense 편 ~

Vue.js 3.0의 새로운 기능을 사용해보십시오. ~ Teleport 편 ~

내용

vue-next의 README.md에서 소개되고 있는 이하 리포지토리를 참고로 Webpack판의 Vue.js 3.0의 개발 환경을 TypeScript에 대응시켰습니다.

이번 동작 코드는 여기에 있습니다.
htps : // 기주 b. 코 m / 카와 타마 료 / ゔ 네 - x t ts - ぇ b pack-p ゔ ぃ w

개발 환경 구축

이하 작업은,
htps : // 기주 b. 코 m / ゔ 에 js / ゔ 에- xt ぇ b ぺ ゜ ゔ ぃ에 w
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에 도움이 되었습니다.
htps : // 기주 b. 코 m / ゔ 에 js / ゔ 에- xt ぇ b ぺ ぺ ぁ ゔ ぃ에 w / 이스에 s / 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를 통과하도록 규칙을 수정하십시오.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() 이었습니다만 이름이 변경된 것 같습니다. htps : // 기주 b. 코 m / ゔ js / ゔ 에네 xt / 푸 l / 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

무사 컴파일이 통과하면 성공입니다.

끝에

이상 "vue-next(Vue.js 3.0-alpha) + TypeScript + Webpack의 개발 환경을 구축한다"였습니다.
이 환경을 사용하여 Vue 3.0의 새로운 기능을 사용해보십시오!