Vuetify, Webpack에서 Vite로
Vue2로 작성된 레거시 프로젝트가 많이 있습니다. 그리고 내가 사용하는 스타일 라이브러리는 무엇입니까? 물론 Vuetify .
이 문서는 Vite의 기능을 활용하는 데 도움이 되도록 작성되었습니다. 레거시 코드가 있더라도 빠른 개발 시간이 필요하기 때문입니다.
이전 브라우저를 지원할 필요가 없는 경우. 개발 빌드 속도를 높이고 싶다면. 전반적으로 더 나은 경험을 원한다면. Vite를 살펴보고 싶을 수도 있습니다.
Vite는 Webpack과 유사한 기능을 가지고 있습니다. 단일 파일 구성 요소 및 Typescript에서 바닐라 JavaScript로 코드를 번들하고 컴파일합니다.
동일하다면 왜 사용하고 싶습니까?
단순한. Vite가 생산하는 번들은 더 작습니다. 실제로 이것은 두 가지를 의미합니다.
- 더 빠른 개발 속도. 더 적은 코드를 생성해야 하므로 더 빠르게 변환됩니다.
- 더 빠른 브라우저 로드 속도. 더 작은 번들이 더 빨리 로드됩니다.
부인 성명
- Vite에 들어가기 전에. 이전 브라우저를 지원하지 않는다는 것을 알아야 합니다.
바벨 제거
package.json 에서 babel과 관련된 모든 항목을 다음과 같이 제거 합니다 .
"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",
이제 Webpack 관련 라이브러리를 제거하겠습니다.
웹팩 제거
package.json 에서 다음을 제거합니다.
"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",
Webpack 및 Babel이 제거되었습니다. 지금. Vite를 추가해 보겠습니다.
Vite 추가
vite다음 을 vite-plugin-vue2실행하여 설치합니다 .
npm install -D vite vite-plugin-vue2
파일 재정렬
Vite는 우리 프로젝트의 파일 구조에 대해 약간 의견이 있습니다. 정적 파일의 디렉토리를 변경해야 합니다.
공용 폴더에 있던 모든 항목을 루트 디렉터리로 가져갑니다.
내가 일반적으로 말하는 "모든 것"은 다음과 같습니다.
- index.html
- favicon.ico
index.html 파일의 변경 사항
index.html 을 열면 다음과 같은 내용을 찾을 수 있습니다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
다시 말해. 갈 필요가 있는 모든 <%...%>것.
완료되면 다음과 같은 것이 있어야 합니다.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="./favicon.ico" />
<title>Admin</title>
<script type="module" src="/src/main.js" defer></script>
</head>
<body>
<noscript>
<strong
>We're sorry but the admin doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<script type="module" src="/src/main.js" defer></script>
Vite 구성 추가
Webpack에 구성을 추가하는 방법과 유사한 맥락에서 Vite를 사용하여 수행해야 합니다.
간단한 구성 파일:
import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
첫 번째. 필요한 종속성을 가져옵니다.
import { defineConfig } from "vite"
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";
이제 어려운 일입니다.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(path.dirname(''), "./src"),
},
},
});
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(path.dirname(''), "./src"),
},
},
Vite 스크립트 추가
또한 스크립트를 업데이트해야 합니다. 이것으로부터:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},
지금까지의 구성은 Vuetify에서 작동하지 않습니다. 이 작업을 수행하려면 몇 가지 특별한 조정이 필요합니다.
추가 단계
지금부터. SFC(Single File Component)를 가져올 때마다 확장자를 포함해야 합니다.
우리가 이것을 할 수 있기 전에:
import HelloWorld from '@/components/HelloWorld';
import HelloWorld from '@/components/HelloWorld.vue';
Eslint가 Vite와 올바르게 작동하려면 일부 설정을 조정해야 합니다. 사용하지 않는 경우 이 섹션을 자유롭게 건너뛰십시오.
일반적인 babel/eslint 구성은 다음과 같습니다.
{
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
}
env옵션에서 에서 로 이동node: true합니다es2021: true.- 를 완전히 제거합니다
parserOptions.
{
"root": true,
"env": {
"es2021": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {}
}
Vite로 Vuetify를 처리하려면 다음 패키지를 설치해야 합니다.
npm install -D unplugin-vue-components
import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import Components from "unplugin-vue-components/vite";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
// Vuetify
VuetifyResolver(),
],
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
결론
- Webpack에서 Vite로 마이그레이션하는 것은 큰 번거로움이 아닙니다. 그러나 속도 증가는 그만한 가치가 있습니다.
- 더 이상 Babel이 필요하지 않습니다.
- Vite는 파일 위치에 대해 의견이 분분합니다.
- Vuetify는 특별한 구성이 필요합니다.
![연결된 목록이란 무엇입니까? [1 부]](https://post.nghiatu.com/assets/images/m/max/724/1*Xokk6XOjWyIGCBujkJsCzQ.jpeg)
