webpack4项目中，使用@zip.js/zip.js（2.7.72版本）解析zip包 报错 unexpected token import.meta.url

背景

原本是使用jszip去解压zip包，获取文件内容的，但是jszip是直接解压到内存里，有大小限制，太大的包没法解析，所以改用@zip.js/zip.js

解压代码实现示例

<template>
  <div>
    <input type="file" ref="file" @change="handleZip">
  </div>
</template>

<script>
// 导入必要的类和核心模块
import { ZipReader, BlobReader, TextWriter } from '@zip.js/zip.js'

export default {
  name: 'ZipTest',
  data () {
    return {
      msg: 'ZipTest'
    }
  },
  methods: {
    async handleZip (e) {
      const file = e.target.files[0]
      if (!file) {
        return console.log('请选择文件')
      }
      try {
        console.log('开始解析zip包...')

        // 直接使用导入的类
        const zipReader = new ZipReader(new BlobReader(file))
        const entries = await zipReader.getEntries()
        console.log('zip包中的文件列表:', entries, '文件大小：', file.size)

        for (const entry of entries) {
          if (entry.directory) continue
          console.log('文件名称:', entry.filename)
          // 使用TextWriter（非流方式）读取内容
          try {
            const content = await entry.getData(new TextWriter())
            console.log('文件内容:', content)
          } catch (error) {
            console.log('文件内容读取失败', error)
          }
        }

        await zipReader.close()
        console.log('解析完成')
      } catch (error) {
        console.log('解析失败', error)
      }
    }
  }
}
</script>

<style scoped></style>

报错

这个是因为webpack4里不支持import.meta.url

解决办法

法一：升级webpack4到webpack5

法二：@zip.js/zip.js使用2.0.12版本，这个版本没有import.meta.url

会报webworker相关的错，因为它默认会使用webworker

1. 第一种方法，设置useWebWorkers为false

const zipReader = new ZipReader(new BlobReader(file), {useWebWorkers: false})

2. 第二种方法，设置webworker

   worker文件下载地址：https://github.com/gildas-lormeau/zip.js/blob/347f13e008678d1fc6f83418c2c38f7e3569d2a4/dist/z-worker.js

   • 可以全局配置

   import {xxx,configure} from '@zip.js/zip.js'
   configure({
     workerScripts: {
     deflate: ["library_path/z-worker.js"],
       inflate: ["library_path/z-worker.js"]
     }
   });
   

   • 或者直接

   const zipReader = new ZipReader(new BlobReader(file), {
     workerScripts: {
       deflate: ["/z-worker.js"],
       inflate: ["/z-worker.js"]
     }
   })
   

法三：自定义webpack的loader，把import.meta.url转为空字符串

因为是用@vue/vli 4.x创建的项目，新增vue.config.js, 如下配置：

const path = require('path')

module.exports = {
  // 自定义loader，把import.meta.url转为空字符串
  // 这个loader在所有的loader之前执行
  // 把node_modules/@zip.js/zip.js目录的js文件都应用这个loader
  // 并且这个是在所有的loader之前执行
  chainWebpack: config => {
    config.module
      .rule('import-meta-url')
      .enforce('pre')
      .test(/\.js$/)
      .include
        .add(path.resolve(__dirname, 'node_modules/@zip.js/zip.js'))
        .end()
      .use('import-meta-url-loader')
      .loader(path.resolve(__dirname, 'loaders/import-meta-url-loader.js'))
  }
}

loaders/import-meta-url-loader文件：

module.exports = function (source) {
// 这里的打印是为了测试，可以删除
  console.log('执行自定义import-meta-url-loader。。。')
  return source.replace(/import.meta.url/g, '""')
}