Vue 기반 ui 구성 요소 라이브러리 개발 방법
개발 모델
데모 미리 보기
ui 구성 요소 라이브러리를 개발할 때 데모를 미리 보고 코드를 수정해야 합니다.
흔히 볼 수 있는 해결 방안은 일반 프로젝트를 개발하는 것처럼
webpack-dev-server
미리 보기 구성 요소를 사용하거나 vue-cli
를 통해 프로젝트를 초기화하거나 스크립트를 직접 설정하는 것이다.문예는
parcel
데모의 개발 설정을 간소화하는 데 사용될 수 있다. (예: muse-ui)프레젠테이션 문서
ui 구성 요소 라이브러리로서, 자신의 구성 요소가 문서를 보여 주어야 합니다.
일반적으로 업계에서 흔히 볼 수 있는 방안은 스스로 전시 문서를 개발하는 것이다.
그러나 이렇게 하면 구성 요소 라이브러리와 문서가 어떻게 동기화되는지 문제를 가져올 수 있다.
왜 vuepress를 사용하지 않습니까?
vuepress는markdown에 구성 요소를 삽입하는 것을 지원하기 때문에 우리는 문서를 작성하면서 구성 요소를 개발할 수 있습니다.
개발 절차상 문서 설명을 먼저 쓰고 코드를 구체적으로 작성해 구성 요소 기능을 실현할 수도 있다.이렇게 하면 문서가 미리 보기 데모로 구성 요소 개발과 동기화하여 업데이트할 수 있습니다.
p.s. React의 구성 요소 문서는 다음 두 라이브러리를 시험해 볼 수 있습니다.
유형 선언
개발과 사용 과정에서 만약에 일부 대상, 방법의 매개 변수에 대해 스마트하게 제시할 수 있다면 좋지 않겠는가?
어떻게 실현합니까?
사실은 해당 폴더에 구성 요소와 관련된 형식 설명 ((
*.d.ts
) 을 추가하고 src/index.d.ts
을 통해 내보냅니다.{
"typings": "src/index.d.ts",
}
처음에 성명 파일을 모두
types/
폴더 아래에 있지만 실천에서는 현재 폴더 아래에 두는 것이 좋다고 생각합니다.한편으로는 유지보수에 유리하고, 다른 한편으로는 원본 코드를 읽을 때도 유형 알림이 있다.어떻게 포장합니까
패키지 도구
패키지 라이브러리와 마찬가지로 롤러를 선택했습니다.
단일 파일 구성 요소
개발 중에
*.vue
이런 단일 파일 구성 요소로 개발할까요? render
함수.iview,element,vant는 .vue
파일을 사용하지만 스타일은 따로 씁니다. ant-design-vue 사용.jsx
파일로 스타일도 따로 씁니다. vux는 테이프
의 .vue
파일을 사용하지만 사용할 때는 vx-loader를 사용해야 합니다. cube-ui는 테이프
의 .vue
파일을 사용하지만 일부 설정이 있습니다.
이치상 전혀 쓰지 않기
는 좀 번거롭기 때문에 롤up-plugin-vue 플러그인을 추가하여 파일을 포장하는 데 사용합니다.
그런데 문제가 하나 생겼다. 어떻게 포장.vue
하는 스타일입니까? 먼저 쓰지 않으려고
js에서 import scss 파일을 직접 시도합니다.문제없지만 구성 요소를 쓸 때 직관적이지 않고 같은 구성 요소의 코드도 두 곳에 분산되어 있다 이어서 Rollup-plugin-vue를 설정하려고 시도하였는데,source-map이 잘못 보고한 문제에 부딪혔습니다.나는 issue를 제기했다.
로드 방식
장면 구분
서로 다른 장면을 구분하기 위해 서로 다른 js를 사용하기 위해 모두 3개의 js(
, commonJs
, es module
, 그리고 압축된 css(umd
를 포장했다.{
"main": "dist/TuaUI.cjs.js",
"module": "dist/TuaUI.es.js",
"browser": "dist/TuaUI.umd.js",
}
전체 로드
대부분의 ui 라이브러리는 코끼리를 냉장고에 넣는 것처럼 완전한 로드를 지원합니다. (그러나 vux는 필요에 따라 로드만 지원합니다.) js 도입 css 도입 플러그인 설치 import TuaUI from '@tencent/tua-ui'
import '@tencent/tua-ui/dist/tua-ui.css'
Vue.use(TuaUI)
결사청은 cube-ui가 기본 양식도 Vue 플러그인으로 작성했기 때문에 필요에 따라 도입할 때 따로 도입해야 한다dist/tua-ui.css
,emmmmmmmmm... import {
/* eslint-disable no-unused-vars */
Style, //
필요 시 로드
ui 라이브러리가 완전하게 불러올 수만 있다면, 분명히 여분의 코드를 포장할 것입니다.
그래서 각종 라이브러리는 일반적으로 필요에 따라 구성 요소를 불러오는 것을 지원하는데 대략 다음과 같은 몇 가지로 나뉜다.muse-ui,iview,ant-design-vue,vant는babel-plugin-import 플러그인을 통해 실현됩니다. element는babel-plugin-component(fork는babel-plugin-import) 플러그인을 통해 실현됩니다. vux는 자신의 vux-loader를 통해 이루어진다. cube-ui는 웹 패키지 설정을 통해 실현됩니다.
tree-shaking
패키지는 사실 포장할 때tree-shaking을 지원합니다. 그러면 원본 코드를 직접 인용하여 필요에 따라 불러올 수 있을까요?
원본 코드는 반드시 es 모듈 규범(import, export)을 만족시켜야 합니다.import { TuaToast } from '@tencent/tua-ui/src/'
Vue.use(TuaToast)
포장을 시도해 보니 Style
효과가 없었고 모든 코드를 포장했다.
sideEffects
사실 문제는 ui 라이브러리의 tree-shaking
에 명시되지 않은 package.json
속성에서 발생했습니다.
단순한 ESM 모듈 환경에서는 어떤 파일이 부작용을 일으키는지 쉽게 파악할 수 있습니다.그러나, 우리 프로젝트는 이런 순도에 도달할 수 없기 때문에, 웹 패키지의compiler에 어떤 코드가 '순수한 부분'인지 제시할 필요가 있습니다.웹 패키지 문서
주의: 스타일 부분은 부작용이 있습니다!즉 sideEffects
해서는 안 된다!
만약 직접 tree-shaking
가 sideEffects
라고 성명한다면 포장할 때 스타일은 포함되지 않습니다!따라서 다음과 같이 구성해야 합니다.{
"sideEffects": [ "*.sass", "*.scss", "*.css" ],
}
vuepress 구성 요소 스타일
vuepress로 문서를 쓸 때 보통 false
아래에 전역 구성 요소를 씁니다.
개발할 때는 별 문제가 없었지만 구덩이가 발견되었다. 문서를 포장할 때 구성 요소의 스타일 docs/.vuepress/components/
을 모두 잃어버렸다.
이유가 뭔지 맞혀보세요.
이 냄비는 지난 절에서 나왔습니다
. 자세한 내용은 이 issue를 보십시오.솔루션은 sideEffects
에 sideEffects
를 추가하면 됩니다.
테스트 데이터
다음은 ui 라이브러리가 설치된 프로젝트를 포장해서 필요에 따라 불러오는 효과가 어떤지 봅시다. Origin dist/js/chunk-vendors.71ea9e72.js ----- 114.04 kb
요약하면 다음과 같습니다.
"*.vue"
114.o4kb
만 하면 js 증가TuaToast
, css 증가0.99kb
0.79kb
만 하면 js 증가TuaIcon
, css 증가0.96kb
6.46kb
추가 후 js 증가TuaUI
, css 증가3.35kb
이상 to be continued...
참고 자료
소편은 5년의 업무 경험을 가진 전단 개발 엔지니어입니다. 전단 프로그래밍에 대해 저는 재료의 통합을 하고 완전한 전단 프로그래밍 학습 노선, 학습 자료와 도구, 그리고 저의 위신을 받아 Tanzhou-10838 여러분께 무료로 드립니다. 여러분도 자신의 노력으로 다음 우수한 프로그래머가 되기를 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
왜 프로그래머, 엔지니어에게 툴 개선·개발 환경 개선·TIPS 습득이 절대로 필요한가‥옛날 읽은 슈퍼 베스트 롱 셀러 책 그것은 즉, 몸의 마비, 손발이 자유롭게 움직일 수 없는 것과 같은 인간으로 말하면. 일단 끝이 아니다. 생명이 계속되는 한은. 라이프 워크. Google 일본어 입력의 전환 설정...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.