升级Angular 10后file-saver saveAs触发优化警告，寻求ES bundle实现方案

嘿，这个问题我之前帮好几个开发者处理过，完全理解你不想禁用警告（毕竟警告是为了帮你优化构建嘛），下面给你几个靠谱的替代方案，都是基于ES模块的，不会触发那个烦人的警告：

1. 用浏览器原生API实现自己的saveAs函数 #

其实根本不需要依赖第三方库，浏览器原生的Blob和URL API就能搞定文件保存，而且完全是ES规范的实现，零外部依赖。直接写个工具函数就行：

/**
 * 原生实现文件保存功能，替代file-saver的saveAs
 * @param blob 要保存的Blob对象
 * @param filename 保存的文件名
 */
const saveAs = (blob: Blob, filename: string): void => {
  const fileUrl = URL.createObjectURL(blob);
  const linkElement = document.createElement('a');
  
  linkElement.href = fileUrl;
  linkElement.download = filename;
  
  // 触发点击下载
  document.body.appendChild(linkElement);
  linkElement.click();
  
  // 清理资源
  document.body.removeChild(linkElement);
  URL.revokeObjectURL(fileUrl);
};

用法和原来的saveAs一模一样，比如保存JSON文件：

const data = { name: 'test', value: 123 };
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
saveAs(blob, 'data.json');

这个方案最轻便，不需要安装任何包，也完全符合Angular的优化要求。

2. 使用支持ES模块的第三方库：browser-fs-access #

如果你不想自己写工具函数，可以试试browser-fs-access，这是一个专门为现代浏览器设计的、基于ES模块的文件操作库，它不仅支持文件保存，还支持文件读取，而且内部会自动降级到原生Blob/URL方案，兼容性很好。

首先安装：

npm install browser-fs-access

然后在代码中使用：

import { save } from 'browser-fs-access';

// 保存文本文件的示例
async function saveTextFile() {
  const content = '这是要保存的内容';
  const blob = new Blob([content], { type: 'text/plain' });
  
  await save(blob, {
    fileName: 'my-file.txt',
    extensions: ['.txt'],
  });
}

这个库完全是ES模块构建的，不会触发CommonJS依赖的警告，而且API设计更贴近现代异步编程的习惯。

3. 升级file-saver到最新版本（可选） #

其实最新版本的file-saver已经提供了ES模块的入口，如果你不想换库，可以尝试升级到最新版：

npm install file-saver@latest

然后在导入的时候，直接指定ES模块入口：

import { saveAs } from 'file-saver/dist/FileSaver.esm.js';

不过这个方案有时候可能因为Angular的构建配置问题还是会触发警告，所以优先级不如前两个方案。

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