vite-plugin-importmap

中文 | English

功能

用于生成importMap，解决hash关联变化问题。

rollup 的 hash 计算会包含import 中的文件名。当一个文件的hash变化，会导致import 中的文件名变化，导致importMap 中的hash 变化。

本插件的解决思路是在rollup打包时不计算hash，使用[name]占位固定文件名，打包后手动计算hash并生成一份importMap，借助<script type="importmap">实现路径的重定向。

安装

npm install -D vite-plugin-importmap

使用

import importmap from 'vite-plugin-importmap';

export default defineConfig({
  build: {
    // 需要关掉预加载，如果需要，可以手动实现
    modulePreload: false,
    rollupOptions: {
      // chunk固定文件名
      chunkFileNames: 'assets/js/[name].js',
      // 资源文件以及入口可以保持hash生成
      entryFileNames: 'assets/js/entry-[name]-[hash:8].js',
      assetFileNames: 'assets/[ext]/[name]-[hash:8].[ext]',
    }
  },
  plugins: [
    importmap({
      host: './assets/',
      include: ['**/*.js'],
      exclude: ['**/entry-*.js'],
    }),
  ],
});

配置项

interface ImportMapOptions {
  /**
   * 打包输出文件夹
   */
  outputDir?: string;
  /**
   * importMap文件名
   */
  importMapName?: string;
  /**
   * 路径前缀
   */
  host?: string;
  /**
   * 包含的文件
   */
  include?: string[];
  /**
   * 排除的文件
   */
  exclude?: string[];
  /**
   * hash长度
   */
  hashLength?: number;
  /**
   * hash算法
   */
  hashAlgorithm?: string;
}