无Svelte/kit的浏览器端Svelte导入lz4库遇报错求助

问题原因 #

你用browserify的-r（require模式）打包出的是CommonJS/UMD格式模块，浏览器原生ES模块解析器处理这类模块时，会因导出映射不明确抛出ambiguous indirect export: default错误——加babelify仅转译语法，并未改变模块输出格式，所以报错依旧。

可行解决方案 #

方案1：调整browserify打包配置，生成ES兼容输出 #

1. 创建.babelrc文件，配置babel保留ES模块格式：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["last 2 versions", "not ie <= 11"]
      }
    }]
  ]
}

2. 修改browserify命令，去掉-r模式，改用独立模块打包：

browserify lib/lz4l.js -s LZ4 -t babelify -o build/lz4.esm.js

3. 在Svelte中导入：

import * as LZ4 from './lz4/build/lz4.esm.js';

方案2：用esbuild替代browserify打包ES模块 #

esbuild原生支持ES模块，打包更高效：

1. 安装依赖：

npm install esbuild --save-dev

2. 执行打包命令生成ES模块文件：

esbuild lib/lz4l.js --bundle --format=esm --outfile=build/lz4.esm.js

3. 直接在组件中导入使用即可，语法同方案1。

方案3：直接使用CDN提供的ES模块版lz4 #

无需自行打包，直接引入第三方封装的ES模块版本：

import * as LZ4 from 'https://unpkg.com/lz4-es@0.0.1/dist/lz4-es.js';

验证导入有效性 #

导入后可通过以下代码测试功能：

const rawData = new TextEncoder().encode('测试压缩内容');
const compressed = LZ4.compress(rawData);
const decompressed = LZ4.decompress(compressed);
console.log(new TextDecoder().decode(decompressed)); // 输出"测试压缩内容"

内容的提问来源于stack exchange，提问作者Juliiian