open-index/open-npm huggingface dataset:
npm package: @plugin-light/vite-plugin-insert-global-comp
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-insert-global-comp">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-insert-global-comp">   <img src="https://img.shields.io/npm/v/@plugi
Author: novlan1
Latest version: 1.0.0

# 全局组件注入

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-insert-global-comp">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-insert-global-comp">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-insert-global-comp">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-insert-global-comp">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
可参考对应的 [webpack loader](./webpack-loader-insert-global-comp.html)。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-insert-global-comp -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { insertGlobalCompVitePlugin } from '@plugin-light/vite-plugin-insert-global-comp';


export default defineConfig({
  plugins: [
    insertGlobalCompVitePlugin({
      pages: ['/Users/mike/Documents/web/src/project/user/views/index/index-home.vue'],
      components: [{
        isOnTop: false,
        name: 'MatchCommDialog', // 组件名称
        id: 'tip-match-comm-tips-dialog',
      },
      {
        isOnTop: false,
        name: 'GlobalComponent', // 组件名称
        id: 'global-component',
      }],
      platforms: ['mp-weixin', 'mp-qq'],
    })
  ],
});
```

## 参数

```ts
export interface IInsertGlobalCompOptions {
  // 插入的组件列表
  components: Array<{
    // 组件名称
    name: string;
    // 组件 id
    id: string;
    // 是否在顶部，默认 false
    isOnTop?: boolean;
  }>;

  // 处理的平台，默认 ['mp-weixin', 'mp-qq']
  platforms?: Array<string>;

  // 处理的页，默认为 `pages.json` 中所有页面
  pages?: Array<string>;


  // 需要插入一个包裹 div 时，给它填充的属性，比如 [['style', 'height: \'100%\'']]
  firstTagAttrs?: Array<Array<string>>;
}
```


## 脚本形式

建议使用脚本形式，前置修改代码，好处是：

1. 避免黑盒，以及潜在的插件间互相影响问题
2. 所见即所得，减少心智负担
3. 容易调试和发现问题

```ts
const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');
const { insertComponentByScript } = require('@plugin-light/vite-plugin-insert-global-comp');

const myEnv = dotenv.config({ path: '.env.local' });
dotenvExpand.expand(myEnv);

function main() {
  insertComponentByScript({
    components: [ // 注入哪些公共组件
      {
        isOnTop: false,
        name: 'GlobalComponent', // 组件名称
        id: 'global-component',
      },
    ],
    firstTagAttrs: [
      ['style', 'height: 100%']
    ]
  });
}

main();
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-legacy-polyfill
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-legacy-polyfill">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-legacy-polyfill">   <img src="https://img.shields.io/npm/v/@plugin-ligh
Author: novlan1
Latest version: 1.0.0

# 修复 vitejs/plugin-legacy 不支持 CDN

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-legacy-polyfill">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-legacy-polyfill">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-legacy-polyfill">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-legacy-polyfill">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
修复 `vitejs/plugin-legacy` 不支持 CDN 的问题。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-legacy-polyfill -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { legacyPolyfillVitePlugin } from '@plugin-light/vite-plugin-legacy-polyfill';


export default defineConfig({
  plugins: [
    legacyPolyfillVitePlugin({
      base: process.env.VUE_APP_PUBLICPATH,
    })
  ],
});
```

## 原理

替换 `index.html` 的脚本文件，核心替换列表如下：

```ts
[
  {
    from: '<script nomodule crossorigin id="vite-legacy-polyfill" src="assets/polyfills-',
    to: `<script nomodule crossorigin id="vite-legacy-polyfill" src="${parsedBase}assets/polyfills-`,
  },
  {
    from: '<script nomodule crossorigin id="vite-legacy-entry" data-src="assets/index-',
    to: `<script nomodule crossorigin id="vite-legacy-entry" data-src="${parsedBase}assets/index-`,
  },
  {
    from: '<script type="module" crossorigin src="assets/polyfills-',
    to: `<script type="module" crossorigin src="${parsedBase}assets/polyfills-`,
  },
];
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-press-ui-resolve
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-press-ui-resolve">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-press-ui-resolve">   <img src="https://img.shields.io/npm/v/@plugin-li
Author: novlan1
Latest version: 1.0.0

# Press UI 路径支持

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-press-ui-resolve">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-press-ui-resolve">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-press-ui-resolve">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-press-ui-resolve">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
支持对 `press-ui` 的引用地址重定向到 `press-ui-next` 中真正的地址。

比如 `press-ui/press-button/press-button.vue` 会被重定向到 `press-ui-next/es/press-button/press-button.mjs`。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-press-ui-resolve -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { pressUiResolveVitePlugin } from '@plugin-light/vite-plugin-press-ui-resolve';


export default defineConfig({
  plugins: [
    pressUiResolveVitePlugin()
  ],
});
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-rem-to-rpx
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-rem-to-rpx">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-rem-to-rpx">   <img src="https://img.shields.io/npm/v/@plugin-light/vite-plu
Author: novlan1
Latest version: 1.0.0

# 转换 Rem

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-rem-to-rpx">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-rem-to-rpx">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-rem-to-rpx">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-rem-to-rpx">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
转化 `rem` 到 `rpx`，可参考对应的 [webpack plugin](./webpack-plugin-rem-to-rpx.html)。


## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-rem-to-rpx -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { remToRpxVitePlugin } from '@plugin-light/vite-plugin-rem-to-rpx';


export default defineConfig({
  plugins: [
    remToRpxVitePlugin(),
  ],
});
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-remove-use-rem
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-remove-use-rem">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-remove-use-rem">   <img src="https://img.shields.io/npm/v/@plugin-light/
Author: novlan1
Latest version: 1.0.0

# 移除 uni-app 中默认的 useRem

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-remove-use-rem">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-remove-use-rem">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-remove-use-rem">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-remove-use-rem">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
移除 uni-app 中默认的 `useRem`，可用于项目的自定义 `rem`。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-remove-use-rem -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { removeUseRemVitePlugin } from '@plugin-light/vite-plugin-remove-use-rem';


export default defineConfig({
  plugins: [
    removeUseRemVitePlugin(),
  ],
});
```

## 参数

```ts
export interface IRemoveUseRemOptions {
  // 默认为 /uni-h5\.es\.js/
  file?: RegExp;
}
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-remove-vue-directive
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-remove-vue-directive">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-remove-vue-directive">   <img src="https://img.shields.io/npm/v/@p
Author: novlan1
Latest version: 1.0.0

# 移除 Vue 指令

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-remove-vue-directive">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-remove-vue-directive">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-remove-vue-directive">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-remove-vue-directive">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
可用于 uni-app 中小程序下的构建。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-remove-vue-directive -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { removeVueDirectiveVitePlugin } from '@plugin-light/vite-plugin-remove-vue-directive';


export default defineConfig({
  plugins: [
    removeVueDirectiveVitePlugin(),
  ],
});
```

## 参数

```ts
export type IRemoveVueDirectionOptions = {
  // 待处理的指令列表
  list?: Array<string>;
};
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-replace-keyword
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-replace-keyword">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-replace-keyword">   <img src="https://img.shields.io/npm/v/@plugin-ligh
Author: novlan1
Latest version: 1.0.0

# 替换关键词

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-replace-keyword">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-replace-keyword">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-replace-keyword">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-replace-keyword">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
替换项目中的关键词。

比如想用微信小程序的分包异步加载时，可在项目中使用一个特殊字符串，然后用本插件替换成 `require`，来避免被 `vite` 打包处理。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-replace-keyword -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { replaceKeywordVitePlugin } from '@plugin-light/vite-plugin-replace-keyword';


export default defineConfig({
  plugins: [
    replaceKeywordVitePlugin({
      replaceMap: {
        requireDynamic: 'require',
      }
    }),
  ],
});
```

## 参数

```ts
export type IOptions = {
  // key 为 要替换的关键词，value 为 目标字符串
  replaceMap: Record<string, string>;
};
```

## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-replace-require-dynamic
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-replace-require-dynamic">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-replace-require-dynamic">   <img src="https://img.shields.io/np
Author: novlan1
Latest version: 1.0.0

# 动态导入组件语法替换

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-replace-require-dynamic">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-replace-require-dynamic">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-replace-require-dynamic">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-replace-require-dynamic">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
将 `aComp(resolve){ require(['xx.vue'], resolve) }` 转为 `aComp: () => import('xx.vue')`。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-replace-require-dynamic -D
```

在 `vite.config.ts` 中添加如下设置：

```ts
import { defineConfig } from 'vite';
import { replaceRequireDynamicVitePlugin } from '@plugin-light/vite-plugin-replace-require-dynamic';


export default defineConfig({
  plugins: [
    replaceRequireDynamicVitePlugin(),
  ],
});
```


## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-support-default-route
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-support-default-route">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-support-default-route">   <img src="https://img.shields.io/npm/v/
Author: novlan1
Latest version: 1.0.0

# 支持默认路由

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-support-default-route">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-support-default-route">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-support-default-route">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-support-default-route">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
`uni-app` Vue3 H5模式下支持默认路由。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-support-default-route -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { supportDefaultRouteVitePlugin } from '@plugin-light/vite-plugin-support-default-route';


export default defineConfig({
  plugins: [
    supportDefaultRouteVitePlugin()
  ],
});
```

更推荐在脚本中前置执行，如：

```ts
const { supportDefaultRoute } = require('@plugin-light/vite-plugin-support-default-route');

supportDefaultRoute({ root: process.cwd() });
```

## 原理

修改 `@dcloudio/uni-h5-vite/dist/plugins/pagesJson.js`，`generatePagesRoute` 方法中增加默认路由：

```ts
`{
  path: "/:catchAll(.*)*",
  redirect: '/',
  meta: {}
}`
```

之前：

```ts
function generatePagesRoute(pagesRouteOptions, config) {
  return pagesRouteOptions.map((pageOptions) => generatePageRoute(pageOptions, config));
}
```

现在：

```ts
function generatePagesRoute(pagesRouteOptions, config) {
  return [...pagesRouteOptions.map(pageOptions => generatePageRoute(pageOptions, config)), `{
  path: "/:catchAll(.*)*",
  redirect: '/',
  meta: {}
}`];
}
```



## 更新日志

[点此查看](./CHANGELOG.md)
npm package: @plugin-light/vite-plugin-support-named-route
Description: <p align="center">   <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-support-named-route">   <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-support-named-route">   <img src="https://img.shields.io/npm/v/@plu
Author: novlan1
Latest version: 1.0.0

# 支持命名路由

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/vite-plugin-support-named-route">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/vite-plugin-support-named-route">
  <img src="https://img.shields.io/npm/v/@plugin-light/vite-plugin-support-named-route">
  <img src="https://img.shields.io/npm/l/@plugin-light/vite-plugin-support-named-route">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

        
`uni-app` Vue3 H5模式下支持命名路由。

## 如何使用

安装

```bash
pnpm add @plugin-light/vite-plugin-support-named-route -D
```

在 `vite.config.ts` 中添加如下设置：


```ts
import { defineConfig } from 'vite';
import { supportNamedRouteVitePlugin } from '@plugin-light/vite-plugin-support-named-route';


export default defineConfig({
  plugins: [
    supportNamedRouteVitePlugin()
  ],
});
```

更推荐在脚本中前置执行，如：

```ts
const { supportNamedRoute } = require('@plugin-light/vite-plugin-support-named-route');

supportNamedRoute({ root: process.cwd() });
```

## 原理

1. 修改 `@dcloudio/uni-h5-vite/dist/plugins/pagesJson.js`，`generatePageRoute` 方法中增加返回 `name`，它会传给 `__uniRoutes`。
2. 修改 `@dcloudio/uni-cli-shared/dist/json/pages.js`，`normalizePagesRoute` 方法中，增加返回 `name`，这个方法会解析上一步生成的数据，最终作为 `vue-router` 的初始化参数。


## 更新日志

[点此查看](./CHANGELOG.md)