Webpack构建JavaScript库：如何直接导入类？

方法1：确认Webpack配置生效 #

你已经在webpack.config.js里配置了libraryExport: "default"，这个配置的作用就是把默认导出直接暴露为库的顶层对象，理论上不需要再加.default就能调用。如果没生效，检查两点：

• 确保Webpack版本是3.x及以上，libraryExport是这个版本之后才支持的配置，旧版本需要升级。
• 注意类名大小写：源码里类名是Myclass（小写c），但Webpack配置里library设的是MyClass（大写C），虽然不影响功能，但建议统一命名避免混淆。

方法2：改用命名导出 #

如果不想依赖Webpack的配置，直接修改源码的导出方式，把默认导出换成命名导出：

// index.js
export class MyClass {
  // 类内容...
}

同时调整Webpack配置，删掉libraryExport这一行：

// webpack.config.js
output: {
   library: 'MyClass',
   libraryTarget: 'umd',
   filename: 'index.js',
   path: path.resolve(__dirname, 'dist'),
},

这样不管是ES模块导入还是全局环境使用，都能直接调用MyClass：

// ES模块导入
import { MyClass } from '你的库名';
// 全局环境
const myInstance = new MyClass();

方法3：同时兼容两种导出方式 #

如果需要保留默认导出的同时支持命名导出，在源码里添加一行命名导出：

// index.js
export default class MyClass {
  // 类内容...
}

export { MyClass };

配合原来的Webpack配置，用户不管用import MyClass from '你的库名'还是import { MyClass } from '你的库名'都能直接拿到类，全局环境也能直接调用MyClass。

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