이 글은 Vue.js Advent Calendar 2018 다음날이다.

자기 소개

key
value
이름:
단념하다
나이, 연령
25세
롤러
서버 측 엔지니어(2019년 1월부터 전면 엔지니어)
GitHub
teinen
Twitter
@tei_nen

TL; DR

Vue.js+Type Script+Parcel로 구성된 보일러판을 제작했습니다.

웹 패키지의 config 지옥에서 개방된 느낌이 좋아요.빌딩도 폭발 속도.

Single File Component 및 Type Script 모두 간단히 사용할 수 있습니다.

개인 개발 등에 추천한다.

창고.

소금주먹밥처럼 수수한 보일러판은 이쪽부터 시작한다.
teinen/vue-ts-parcel-boilerplate
Vue.js + TypeScript + Parcel boilerplate

프로젝트 구성

Vue.js

vue-router

Vuex

TypeScript

Parcel

ESLint

Jest

package.json 이런 느낌이에요.

{
  "name": "vue-typescript-parcel-boilerplate",
  "description": "This is a very simple boilerplate with Vue.js, TypeScript, Parcel.",
  "author": "teinen",
  "license": "MIT",
  "scripts": {
    "serve": "parcel index.html --open",
    "watch": "parcel watch index.html",
    "build": "parcel build index.html",
    "lint": "eslint --fix --ext .vue,.ts ./src",
    "test": "jest --watch"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-class-component": "^6.3.2",
    "vue-hot-reload-api": "^2.3.1",
    "vue-property-decorator": "^7.2.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/jest": "^23.3.10",
    "@vue/component-compiler-utils": "^2.3.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^3.1.1",
    "@vue/test-utils": "^1.0.0-beta.26",
    "autoprefixer": "^9.3.1",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.9.0",
    "eslint-plugin-vue": "^4.7.1",
    "jest": "^23.6.0",
    "parcel-bundler": "^1.10.3",
    "postcss-modules": "^1.4.1",
    "sass": "^1.15.0",
    "ts-jest": "^23.10.5",
    "typescript": "^3.1.6",
    "vue-jest": "^3.0.1",
    "vue-template-compiler": "^2.5.17"
  }
}

사용법

# 依存関係のインストール
$ yarn install

# 開発用サーバーの起動(webpack-dev-server 的なもの)
$ yarn serve # => localhost:1234 でサーバーが立ち上がる

해보신 소감.

빠른 구축

공식적으로 발표된 기준처럼 건물은 매우 빠르다.

총 1726개 모듈

압축 전 6.5M

Macbook Pro(2016년 모델, 4 코어)에서 구축

반도라
구축 시간
browserify
22.98s
webpack
20.71s
parcel
9.98s
parcel(현금 사용)
2.64s
공식 페이지
지금 수중에 큰 앱이 없기 때문에 손 옆에 있는 측정을 따라잡아야 합니다...

SFC(Single File Component) 를 활용할 수 있습니다.

이것은 나 개인적으로 가장 즐거운 곳이다.
물론scoped SCSS도 이용할 수 있다.
vue-ts-parcel-boilerplate/src/components/Hello.vue

<template>
  <h1>Hello, {{ framework }} + {{ altjs }} + {{ bundler }}</h1>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class Hello extends Vue {
  /** data */
  @Prop() private framework!: string;
  @Prop() private altjs!: string;
  @Prop() private bundler!: string;
}
</script>

<style lang="scss" scoped>
</style>

전에는 Parcel-Plugin-vue라는 플러그인이 필요합니다.였던 것 같은데 지금은 필요 없어요.
하지만 다음 두 가지가 필요합니다.

@vue/component-compiler-utils

vue-template-compiler

vue-router 및 Vuex 사용 가능

파켈과 이 근처의 핵심 라이브러리 조합에 대한 기사는 별로 나오지 않았지만 정상적으로 사용할 수 있다.
Vue.js에서의 개발은 어렵지 않겠죠.😊

zero configuration 폼 잡는 거 아니야!

정말 설정이 없어요.지나치게 순결하고 간단하다.
'설정이 없다'보다는'설정하지 않는다'는 강한 의지가 더 느껴진다.

총결산

Parcel, 이름은 알지만...

웹 패키지 등과 같은 요령을 사용할 수 있습니까?

Single File Component 를 사용할 수 있습니까?

vue-router와 Vuex를 사용할 수 있습니까?

이처럼 단순한 의문은 공식 홈페이지의 베우요리책와 자산 페이지 모두 매끄러웠다며 "실제로 어디까지 쓸 수 있을까"라고 반문했다.이런 검증도 보일러판을 겸했다.
Vue.js는 3.0보다 작고 속도가 더 빠르다.
(이 이야기의 상세한 내용은 공식 블로그를 번역한 것이다카페 씨의 보도
Vue.목을 길게 빼고 js3.0을 기다리면서 경량, 고속, 간단한 Parcel과 Vue를 기다리고 있습니다.js의 조합을 체험해 봅시다!