如何编写JS模块，同时支持默认导出与按需导入以实现Tree Shaking

要解决类无法Tree Shaking的问题，同时保留状态共享、支持两种导入方式，可以用模块级闭包+独立导出方法的方案，既满足打包体积优化需求，又和原代码的单例、状态共享逻辑一致：

// auth.js
// 模块内部私有共享状态，替代原类中this上的变量
let _userData = null;
let _isInitialized = false;

// 独立导出每个方法，支持按需导入
export function init() {
  _isInitialized = true;
  // 原init方法的逻辑写在这里
}

export function getUserData() {
  if (!_isInitialized) {
    throw new Error('请先调用init初始化Auth');
  }
  // 原getUserData的逻辑写在这里
  return _userData;
}

export function signin(username, password) {
  // 原signin的逻辑写在这里
  // 示例：验证通过后更新共享状态
  _userData = { username };
}

// 默认导出整合所有方法的对象，支持整体导入
const auth = {
  init,
  getUserData,
  signin
};

export default auth;

方案优势 #

1. 支持Tree Shaking：每个方法都是独立的ES模块导出，Webpack会自动剔除未被使用的方法，比如只导入init和getUserData时，signin不会被打包。
2. 两种导入方式兼容：
   • 按需导入：import { init, getUserData } from "auth.js"，直接调用方法即可
   • 整体导入：import auth from "auth.js"，通过auth.init()、auth.getUserData()调用
3. 状态共享与封装：模块内的_userData、_isInitialized是私有变量，只有内部方法能访问，和原类中this的作用一致，保证了状态的封装性，同时所有方法共享同一状态（模块是单例，多次导入也只会初始化一次）。

注意事项 #

• 原类在构造函数中自动调用了init，现在需要开发者手动调用init方法完成初始化（可以在方法内加判断避免重复初始化）。
• 如果需要更严格的封装，可以用IIFE包裹状态，但ES模块本身已经是闭包，直接用模块级变量足够安全。

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