ocv系列免安装引入外部模块 vite-plugin-ocv-external

v:4.0.0

在使用ocv 系列组件的过程中，需要通过cdn等方式来引入vue、pinia、router、axios、ocv 等，为了便于集成，开发改组件。 本组件可以在开发或打包过程中都不需要通过pnpm/npm 来安装依赖包，只需要在public/static/cdn/index 中配置即可。

• 2024-01-29 css 已经注入到js了，不需要单独进行引入css了

安装

Install the plugin with pnpm:

pnpm install vite-plugin-ocv-external --save-dev

or yarn

yarn add vite-plugin-ocv-external -D

使用

修改 vite.config.js 如下

// vite.config.js
import {globals,plugins} from "vite-plugin-ocv-external";

引入插件

// vite.config.js
let ps =  plugins(process.env.NODE_ENV,globals);
export default defineConfig({
    //  ...
    plugins: [vue(),... ps],
    // ...
    build:{
        rollupOptions:{
            external:Object.keys(globals),
            plugins:[...ps]
        }
    }
})

支持的模块有

    vue: "Vue",
    pinia: "Pinia",
    ocv: "ocv",
    axios: "axios",
    "vue-router": "VueRouter",
    "element-plus": "ElementPlus",
    vuetify:"Vuetify"

完整案例

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {globals,plugins} from "./plugin/vite-plugin-ocv-external";


// 正式环境下需要 importToConst(globals) ，开发环境需要  externalGlobals(globals)
let ps =  plugins(process.env.NODE_ENV,globals);
export default defineConfig({
    base:"./",
    plugins: [vue(),... ps],
    resolve: {
        // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    build:{
        rollupOptions:{
            external:Object.keys(globals),
            plugins:[...ps]
        }
    }
})

发布

npm login --registry https://registry.npmjs.org

npm publish