npm install pnpm -g
pnpm init
shamefully-hoist = true
这里简单说下为什么要配置shamefully-hoist。
如果某些工具仅在根目录的node_modules时才有效,可以将其设置为true来提升那些不在根目录的node_modules,就是将你安装的依赖包的依赖包的依赖包的…都放到同一级别(扁平化)。说白了就是不设置为true有些包就有可能会出问题。
新建一个pnpm-workspace.yaml文件将我们的包关联起来,使各个项目之间能够互相引用
packages:
- 'packages/**'
- 'examples'
这样就能将我们项目下的packages目录和examples目录关联起来了,当然如果你想关联更多目录你只需要往里面添加即可。根据上面的目录结构很显然你在根目录下新packages和examples文件夹,packages文件夹存放我们开发的包,examples用来调试我们的组件
examples文件夹就是接下来我们要使用vite搭建一个基本的Vue3脚手架项目的地方
我们开发环境中的依赖一般全部安装在整个项目根目录下,方便下面我们每个包都可以引用,所以在安装的时候需要加个 -w
pnpm i vue@next typescript sass -D -w //都是开发依赖
因为我们开发的是vue3组件, 所以需要安装vue3,当然ts肯定是必不可少的(当然如果你想要js开发也是可以的,甚至可以省略到很多配置和写法。但是ts可以为我们组件加上类型,并且使我们的组件有代码提示功能,未来ts也将成为主流);sass为了我们写样式方便
配置tsconfig.json(tsconfig.json详细配置)
npx tsc --init
将创建一个typescript默认配置文件tsconfig.json
declaration
用于指定是否在编译完成后生成相应的*.d.ts文件,默认为false
outdir
定义TS编译后的目录,如果没有声明,默认编译后的文件位置将和ts源文件在同一位置
npx tsc --init //将创建一个typescript默认配置文件tsconfig.json
修改以下配置:
{
"compilerOptions": {
"baseUrl": ".", // 解析非相对模块的基地址,默认是当前目录
"jsx": "preserve", // 指定 jsx 格式
"strict": true, // 开启所有严格的类型检查
"target": "ES2015", // 目标语言的版本
"module": "ESNext", // 生成代码的模板标准
"skipLibCheck": true, //是否跳过声明文件的类型检查,这可以在编译期间以牺牲类型系统准确性为代价来节省时间,默认:false
"esModuleInterop": true, // 允许export=导出,由import from 导入
"moduleResolution": "node", // 模块解析策略,ts默认用node的解析策略,即相对的方式导入
"lib": ["esnext", "dom"] // TS需要引用的库,即声明文件,es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性,通常都需要配置,如es8的数组新特性需要引入"ES2019.Array"
}
}
其实搭建一个vite+vue3项目是非常容易的,因为vite已经帮我们做了大部分事情
进入examples文件夹,执行
pnpm init
@vitejs/plugin-vue(Vue3 单文件组件支持)用来支持.vue文件的转译
pnpm install vite @vitejs/plugin-vue -D -w
这里安装的插件都放在根目录下
新建vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins:[vue()]
})
@vitejs/plugin-vue 会默认加载examples下的index.html
新建index.html
DOCTYPE html>
<html lang="en">
<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">
<title>Documenttitle>
head>
<body>
<div id="app">div>
<script src="main.ts" type="module">script>
body>
html>
注意: vite 是基于esmodule的 所以type=“module”
<template>
<div>
启动测试
div>
template>
import {createApp} from 'vue'
import App from './app.vue'
const app = createApp(App)
app.mount('#app')
此时会发现编译器会提示个错误:找不到模块“./app.vue”或其相应的类型声明
因为直接引入.vue文件 TS会找不到对应的类型声明;所以需要新建typings(命名没有明确规定,TS会自动寻找.d.ts文件)文件夹来专门放这些声明文件。
typings/vue-shim.d.ts
TypeScriptTS默认只认ES 模块。如果你要导入.vue文件就要declare module把他们声明出来。
declare module '*.vue' {
import type { DefineComponent } from "vue";
const component:DefineComponent<{},{},any>
}
最后在package.json文件中配置scripts脚本
...
"scripts": {
"dev": "vite"
},
...
然后终端输入我们熟悉的命令:pnpm run dev
1)解决 Vite (Only file and data URLs are supported by the default ESM loader. Received protocol ‘node:‘)
解决:需要升级node
本节可能和目前组件的开发关联不大,但是未来组件需要引入一些工具方法的时候会用到
接下来就是要往我们的packages文件夹冲填充内容了。
一般packages要有utils包来存放我们公共方法,工具函数等
既然它是一个包,所以我们新建utils目录后就需要初始化它,让它变成一个包;终端进入utils文件夹执行:pnpm init 然后会生成一个package.json文件;这里需要改一下包名,我这里将name改成@lime-ui/utils表示这个utils包是属于lime-ui这个组织下的。所以记住发布之前要登录npm新建一个组织;例如lime-ui
{
"name": "@Lime-ui/utils",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "MIT"
}
因为我们使用ts写的,所以需要将入口文件index.js改为index.ts,并新建index.ts文件:(先导出一个简单的加法函数)
export const testfun = (a:number,b:number):number=>{
return a + b
}
components是我们用来存放各种UI组件的包
新建components文件夹并执行 pnpm init 生成package.json
{
"name": "lime-ui",
"version": "1.0.0",
"description": "",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
新建index.ts入口文件并引入utils包
import {testfun} from '@lime-ui/utils'
const result = testfun (1,1)
console.log(result)
由于组件库是基于ts的,所以需要安装esno来执行ts文件便于测试组件之间的引入情况
控制台输入esno xxx.ts即可执行ts文件
npm i esno -g
进入components文件夹执行
pnpm install @lime-ui/utils
你会发现pnpm会自动创建个软链接直接指向我们的utils包;此时components下的packages:
{
"name": "lime-ui",
"version": "1.0.0",
"description": "",
"main": "src/index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@lime-ui/utils": "workspace:^1.0.1"
}
}
你会发现它的依赖@lime-ui/utils对应的版本为:workspace:^1.0.0;因为pnpm是由workspace管理的,所以有一个前缀workspace可以指向utils下的工作空间从而方便本地调试各个包直接的关联引用。
到这里基本开发方法我们已经知道啦;接下来就要进入正题了,开发一个button组件
1) pnpm install 包
时发现并没有出现workspace,只有版本号
解决:很大可能是因为包名重复,可以去npm官网搜索npm包名,找一个没用过的
在components文件夹下新建src,同时在src下新建button组件目录和icon组件目录(新建icon为了便于调试);此时components文件目录如下
-- components
-- src
-- button
-- icon
-- index.ts
-- package.json
让我们先测试一下我们的button组件能否在我们搭建的examples下的vue3项目本引用~
首先在button下新建一个简单的button.vue
<template>
<button>测试按钮button>
template>
然后在button/index.ts将其导出
import Button from './button.vue'
export default Button
因为我们开发组件库的时候不可能只有button,所以我们需要一个components/src/index.ts将我们开发的组件一个个的集中导出
export { default as Button } from './button'
接着在components/index.ts 做如下配置
import * as components from './src/index'
export * from './src/index'
export default {
install: (app: any) => {
for (const comkey in components) {
app.component((components as any)[comkey].name, (components as any)[comkey])
}
}
}
好了,一个组件的大体目录差不多就是这样了,接下来请进入我们的examples来看看能否引入我们的button组件
上面已经说过执行在workspace执行 pnpm i xxx的时候pnpm会自动创建个软链接直接指向我们的xxx包。
所以这里我们直接在examples执行:pnpm i lime-ui
此时你就会发现packages.json的依赖多了个
"lime-ui": "workspace:^1.0.0"
这时候我们就能直接在我们的测试项目下引入我们本地的components组件库了,启动我们的测试项目,来到我们的 examples/app.vue 直接引入Button
<template>
<div>
<Button />
div>
template>
<script lang="ts" setup>
import { Button } from 'lime-ui'
script>
不出意外的话你的页面就会展示我们刚刚写的button组件了
好了万事具…(其实还差个打包,这个后面再说~);接下来的工作就是专注于组件的开发了;让我们回到我们的button组件目录下(测试页面不用关,此时我们已经可以边开发边调试边看效果了)
因为我们的button组件是需要接收很多属性的,如type、size等等,所以我们要新建个types.ts文件来规范这些属性
在button目录下新建types.ts
import { ExtractPropTypes } from 'vue'
export const ButtonType = ['default', 'primary', 'success', 'warning', 'danger']
export const ButtonSize = ['large', 'normal', 'small', 'mini'];
export const buttonProps = {
type: {
type: String,
values: ButtonType
},
size: {
type: String,
values: ButtonSize
}
}
export type ButtonProps = ExtractPropTypes<typeof buttonProps>
TIPS
import type 表示只导入类型;ExtractPropTypes是vue3中内置的类型声明,它的作用是接收一个类型,然后把对应的vue3所接收的props类型提供出来,后面有需要可以直接使用
很多时候我们在vue中使用一个组件会用的app.use 将组件挂载到全局。要使用app.use函数的话我们需要让我们的每个组件都提供一个install方法,app.use()的时候就会调用这个方法;
我们将button/index.ts调整为
import button from './button.vue'
import type {App,Plugin} from "vue"
type SFCWithInstall<T> = T&Plugin
const withInstall = <T>(comp:T) => {
(comp as SFCWithInstall<T>).install = (app:App)=>{
//注册组件
app.component((comp as any).name,comp)
}
return comp as SFCWithInstall<T>
}
const Button = withInstall(button)
export default Button
此时我们就可以使用app.use来挂载我们的组件啦
其实withInstall方法可以做个公共方法放到工具库里,因为后续每个组件都会用到,这里等后面开发组件的时候再调整
到这里组件开发的基本配置已经完成,最后我们对我们的组件库以及工具库进行打包,打包之前如果要发公共包的话记得将我们的各个包的协议改为MIT开源协议
...
"license": "MIT",
...
打包这里选择vite,它有一个库模式专门为我们来打包这种库组件的。
前面已经安装过vite了,所以这里直接在components下直接新建vite.config.ts(配置参数文件中已经注释):
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"
export default defineConfig(
{
build: {
target: 'modules',
//打包文件目录
outDir: "es",
//压缩
minify: false,
//css分离
//cssCodeSplit: true,
// rollup配置
rollupOptions: {
//忽略打包vue文件
external: ['vue'],
input: ['src/index.ts'],
output: [
{
format: 'es',
//不用打包成.es.js,这里我们想把它打包成.js
entryFileNames: '[name].js',
//让打包目录和我们目录对应
preserveModules: true,
//配置打包根目录
dir: 'es',
preserveModulesRoot: 'src'
},
{
format: 'cjs',
entryFileNames: '[name].js',
//让打包目录和我们目录对应
preserveModules: true,
//配置打包根目录
dir: 'lib',
preserveModulesRoot: 'src'
}
]
},
lib: {
entry: './index.ts',
formats: ['es', 'cjs']
}
},
plugins: [
vue()
]
}
)
这里我们选择打包cjs(CommonJS)和esm(ESModule)两种形式,cjs模式主要用于服务端引用(ssr),而esm就是我们现在经常使用的方式,它本身自带treeShaking而不需要额外配置按需引入(前提是你将模块分别导出),非常好用~
其实到这里就已经可以直接打包了;components下执行: pnpm run build你就会发现打包了es和lib两个目录
到这里其实打包的组件库只能给js项目使用,在ts项目下运行会出现一些错误,而且使用的时候还会失去代码提示功能,这样的话我们就失去了用ts开发组件库的意义了。所以我们需要在打包的库里加入声明文件(.d.ts)。
那么如何向打包后的库里加入声明文件呢? 其实很简单,只需要引入vite-plugin-dts
pnpm i vite-plugin-dts -D -w
然后修改一下我们的vite.config.ts引入这个插件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue"
import dts from 'vite-plugin-dts'
export default defineConfig(
{
build: {...},
plugins: [
vue(),
dts({
//指定使用的tsconfig.json为我们整个项目根目录下掉,如果不配置,你也可以在components下新建tsconfig.json
tsConfigFilePath: '../../tsconfig.json'
}),
//因为这个插件默认打包到es下,我们想让lib目录下也生成声明文件需要再配置一个
dts({
outputDir:'lib',
tsConfigFilePath: '../../tsconfig.json'
})
]
}
)
因为这个插件默认打包到es下,我们想让lib目录下也生成声明文件需要再配置一个dts插件,暂时没有想到其它更好的处理方法~
然后执行打包命令你就会发现你的es和lib下就有了声明文件
其实后面就可以进行发布了,发布之前更改一下我们components下的package.json如下:
{
"name": "lime-ui",
"version": "1.0.0",
"main": "lib/index.js",
"module":"es/index.js",
"scripts": {
"build": "vite build"
},
"files": [
"es",
"lib"
],
"keywords": [
"lime-ui",
"vue3组件库"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts"
}
解释一下里面部分字段
pkg.module
我们组件库默认入口文件是传统的CommonJS模块,但是如果你的环境支持ESModule的话,构建工具会优先使用我们的module入口
pkg.files
files是指我们1需要发布到npm上的目录,因为不可能components下的所有目录都被发布上去
做了那么多终于到发布的阶段了;其实npm发包是很容易的,就拿我们的组件库lime-ui举例吧
发布之前记得到npm官网注册个账户,如果你要发布@xx/xx这种包的话需要在npm新建个组织。组织名就是@后面的,比如我建的组织就是lime-ui,注册完之后你就可以发布了
首先要将我们代码提交到git仓库,不然pnpm发布无法通过,后面每次发版记得在对应包下执行 pnpm version patch你就会发现这个包的版本号patch(版本号第三个数) +1 了,同样的 pnpm version major major和 pnpm version minor 分别对应版本号的第一和第二位增加。
如果你发布的是公共包的话,在对应包下执行
pnpm publish --access public
输入你的账户和密码(记得输入密码的时候是不显示的,不要以为卡了)正常情况下应该是发布成功了
注意
// 全局安装
npm install -g nrm
// 查看当前源
npm config get registry
// 切换淘宝源
nrm use taobao
// 切换npm源
nrm use npm
查看之后发现我之前直接设置的是淘宝源没有设置npm的源
npm config set registry https://registry.npmjs.org/
这样npm源就设置好了
然后,我们再次执行npm login
1) 发布时402:
npm ERR! code E402
npm ERR! 402 Payment Required - PUT https://registry.npmjs.org/@okexchain%2ftruffle-plugin-verify - You must sign up for private packages
解决办法:npm publish --access public
也可以直接在package.json添加:
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
},
2)发布时404
先去执行 npm init --scope=loops.org
参数根据自己的修改
npm init --scope=sakura-ui(新建组织名称)
3)发布时 403
非首次发布,需要修改版本号,命令行或package.json文件修改都可以
如果是首次发包,那么可能是和npm线上包重名了,到packages.json中修改包名,再次发布
npm login
npm version patch //version自增,例如从1.0.2自增到了1.0.3
最后,执行npm publish
vue3+ts+vite 项目中eslint+prettier如何配置
1)安装依赖
pnpm i eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin -D -w
2)在package.json上添加一行命令
"lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"
4)创建一个.eslintrc.js文件
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
//使用setup语法糖
"vue/setup-compiler-macros": true,
},
extends: [
'airbnb-base',
"plugin:vue/vue3-essential",
"plugin:vue/vue3-recommended",
'plugin:@typescript-eslint/recommended',
],
//这句不能少
parser: "vue-eslint-parser",
parserOptions: {
ecmaVersion: "latest",
parser: "@typescript-eslint/parser",
sourceType: "module",
},
plugins: ["vue", "@typescript-eslint"],
rules: {
"vue/comment-directive": 0, //这句不能少不然报错
}
};
4)添加 .eslintignore文件
node_modules
dist
pnpm-lock.yaml
.eslintrc.js
3)安装prettier
npm i -D prettier
4)配合ESLint检测代码风格
npm i eslint-plugin-prettier eslint-config-prettier -D -w
eslint-plugin-prettier:运行prettier代码格式化插件的配置。调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果出现不一致,这个地方就会被prettier进行标记。
eslint-config-prettier:关闭一些不必要的或者是与prettier冲突的lint选项,这样我们就不会看到一些error出现两次。这里有个文档,列出了会与prettier冲突的配置项。
5).prettierrc.js 配置规则文件
module.exports = {
// 行尾不需要有分号
"semi": false,
// 使用单引号
"singleQuote": true,
/*
overrides作用是指定A类文件使用B类文件作为分析器,如果遇到 No parser could be inferred for file 提示,
则可以使用overrides解决。下面的意思是.prettierrc文件使用json分析器来格式化
*/
"overrides": [
{
"files": ".prettierrc",
"options": {
"parser": "json"
}
}
]
}
6).prettierignore
.prettierignore 配置 prettier 忽略文件同.eslintignore一样