首页 > 其他分享 >Vite插件快速识别-开发篇

Vite插件快速识别-开发篇

时间:2022-12-21 17:56:10浏览次数:36  
标签:插件 vue ts unplugin Vite import 识别 vite

Vite插件快速识别-日常开发篇

1、打包构建后移除console.log和注释:vite官方自带
// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
    build:{
        minify: 'terser',
        terserOptions: {
            //打包后移除console和注释
            compress: {
                drop_console: true,
                drop_debugger: true,
            },
        },
    },
})
2、实现vue函数和组件库的自动按需导入:unplugin-auto-import插件和unplugin-vue-components插件实现
pnpm i unplugin-auto-import unplugin-vue-components  -D
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import ViteComponents from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    ...
    AutoImport({
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      dts: true,
      imports: ['vue', 'vue-router'],
    }),
    ViteComponents({
      dts: true,
      resolvers: [VantResolver()],
    }),
  ],
}) 
// tsconfig.json   需要校验的文件后缀集合
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx","src/**/*.vue","components.d.ts","auto-imports.d.ts"],
3、自动引入组件库的样式以ElementPlus为参考:vite-plugin-style-import插件实现
npm i  vite-plugin-style-import -D
// vite.config.ts
import {
  createStyleImportPlugin,
  ElementPlusResolve,
} from 'vite-plugin-style-import';

export default defineConfig({
  plgins: [
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name: string) => {
            name = name.substring(3, name.length);
            return `element-plus/es/components/${name}/style/index`;
          },
        },
      ],
    }),
  ]
});

4、Vite 仅执行 .ts 文件的转译工作,并不执行任何类型检查。vite-plugin-checker插件实现对代码进行有效约束
npm install vite-plugin-checker -D
// vite.config.ts
export default defineConfig({
  plugins: [checker({
    typescript: true
  })]
})
5、vite-plugin-svg-icons 用于生成 svg 雪碧图

标签:插件,vue,ts,unplugin,Vite,import,识别,vite
From: https://www.cnblogs.com/kq981024/p/16996815.html

相关文章

  • Electron-Vite快速识别
    构建Vite-electron项目npmielectron-vite-Dnpmcreate@quick-start/electronproject-name--templatevue-tsElectron的运行流程Electron进程一、主进程:有且......
  • Vite + Vue3导入 vue-i18n 插件
    使用Vite+Vue3导入vue-i18n插件Step1下载vue-i18n插件npminstallvue-i18nStep2新建local文件夹,创建index.jsindex.jsimport{createI18n}from"v......
  • KingbaseES V8R6 sslinfo 插件
    前言KingbaseES对使用SSL连接加密客户端/服务器通讯的本地支持,可以增加数据传输安全性。本文展示配置ssl连接,并通过安装一个插件验证ssl加密认证使用。一、配置ssl连接......
  • Argocd/Argocd Rolloouts/Argocd-cli/kubectl argo rollouts插件部署
    argocd部署官网​​https://argo-cd.readthedocs.io/en/stable/getting_started/​​部署地址参考​​https://argo-cd.readthedocs.io/en/stable/getting_started/​​​​......
  • 中学数学知识点实体识别
    中学数学知识点实体识别⚠️所有有关智慧教育的项目已完结停更,不再维护,感谢您的支持构建中学数学知识图谱的第一步是完成数学命名实体识别。1.Overview  本文定义是:中学数......
  • 机器学习——植物叶片病害识别
    机器学习——植物叶片病害识别一、选题背景随着现代科技的发展,人们对于人工智能领域的研究越发的深入。机器学习作为人工智能和识别领域研究的重要课题非常值得我们......
  • Vue-router4.0接口快速识别
    Vue-router4.0接口快速识别<router-link> :将会被渲染a标签属性名属性类型属性作用tostring/object相当于跳转调用router.push(string/object)replacebo......
  • PaddlePaddle 实现手写数字识别
    PaddlePaddle实现手写数字识别在这次实验中我们将使用PaddlePaddle来实现三种不同的分类器,用于识别手写数字。三种分类器所基于的模型分别为Softmax回归、多层感知器、......
  • 机器学习——人脸性别识别
    一、选题背景    人脸识别技术是模式识别和计算机视觉领域最富挑战性的研究课题之一,也是近年来的研究热点,人脸性别识别作为人脸识别技术的重要组成部分也受到了广......
  • 推荐8个提高工作效率的IntelliJ插件
    前言欢迎关注微信公众号「JAVA旭阳」交流和学习IntelliJ目前已经成为市面上最受欢迎的Java开发工具,这得益于里面非常丰富的插件机制。本文我将分享在日常开发中我经常......