@forsakringskassan/vite-lib-config

Vue框架库建设工具链.

• 混合无害环境管理/CJS包.
• 与巴贝尔相传.
• 支持单发.
• 可选:构建页面对象,选择器,并进行模拟.
• 可选:共享打字配置.

配置

使用 fk-write-config 将锅炉板配置文件写入仓库:

fk-write-config

API 提取器是选项a,必须启用 --with-api-extractor。 。 。 .

默认是假设 vitest 用作测试跑道,使用 --with-jest 或者说 --with-vitest 明确设置试跑者.

捆绑的依赖关系

默认情况下所有依附关系( E)dependencies 财务报告和审定财务报表 peerDependencies)被标记为外部,而不在输出文件中捆绑. 此选项可通过设置被覆盖 externalDependencies 内 package.json数字 :

     "dependencies": {
         "lodash": "^4.17.20"
     },
+    "externalDependencies": [
+        "lodash"
+    ],

使用量

babel.config.js

module.exports = {
    presets: ["@forsakringskassan/vite-lib-config/babel"],
};

vite.config.ts

import { defineConfig } from "@forsakringskassan/vite-lib-config/vite";

export default defineConfig();

除了常规 Vite 配置外, 您还可以通过可选 fk 属性 :

export interface FKConfig {
    /** path to component to mount by default (default `src/dev-vite/app.vue`) */
    entrypoint?: string;
    /** mocks to configure with apimock-express (default `[]`) */
    mocks?: MockEntry[] | Mock[]
}

package.json

{
    "scripts": {
        "build": "fk-build-vue-lib"
    }
}

可选: API 提取器

 {
     "scripts": {
         "build": "fk-build-vue-lib",
+        "postbuild": "fk-api-extractor api-extractor.json",
     }
 }

多个文件或 globs 可以给出 :

fk-api-extractor api-extractor. *.json) 互联网档案馆的存檔,存档日期2013-12-02

确定全球模块增强用途:

fk-api-extractor -- patch-augments (英语)

使用 --help 可以看到完整的描述.

可选:构建页面对象和选择器

 {
     "scripts": {
         "build": "fk-build-vue-lib",
+        "build:selectors": "fk-build-selectors",
     }
 }

若为 src/selectors/index.ts 它将被建造到 dist/${format}/selectors.${cjs,mjs}。 。 。 .

若为 src/cypress/index.ts 它将被建造到 dist/${format}/cypress.${cjs,mjs}。 。 。 .

可选:构建模拟器

 {
     "scripts": {
         "build": "fk-build-vue-lib --mocks",
     }
 }

这个构筑 src/mocks/index.ts 改为 dist/${format}/mocks.${cjs,mjs}文件必须导出类型的模拟列表 apimock-express (单位:千美元)MockEntry[] 或者说 Mock[]) (中文(简体) ).

市场/市场/指数

import { type Mock } from "@forsakringskassan/apimock-express";

const mocks: Mock[] = [...];
export default mocks;

开发服务器

{
    "scripts": {
        "start": "vite"
    }
}

创建 src/local.{ts,mts,mjs,js} 导出单个函数 setup数字 :

import { createApp } from "vue";
import { type SetupOptions } from "@forsakringskassan/vite-lib-config";

export function setup(options: SetupOptions): void {
    const { rootComponent, selector } = options;
    const app = createApp(rootComponent);
    app.mount(selector);
}

如果 setup 函数是async(即返回 a) Promise在继续之前将等待它.

创建 src/vite-dev/app.vue 包含要用作开发环境的根组件.

在 Dev 模式下运行时,可以指定一个可选文件名(或文件名的一部分)来运行,而不是默认 src/vite-dev/app.vue数字 :

vite -- MyAwesomeExample

将搜索 .vue 匹配这些文件夹中给定模式(模糊)的文件 :

• **/docs
• **/examples
• **/test

辅助插件

如果您需要在库中使用自定义插件, 请记住包含默认插件, 否则这些插件会被覆盖 .

vite.config.ts

import {
    defineConfig,
    defaultPlugins,
} from "@forsakringskassan/vite-lib-config/vite";

export default defineConfig({
    plugins: [...defaultPlugins, myFancyPlugin],
});