如何在Webpack构建的React项目中导入带方法的ES5对象BrowserPrint

问题根因&解决方法 #

1. 你当前封装版本的导入错误核心原因

你在foo.js中使用的是命名导出语法export class BrowserPrint，没有声明默认导出，所以导入时不能用默认导入的写法，必须用命名导入的语法，用大括号包裹导出的类名：

// 错误写法
import BrowserPrint from 'foo.js'
import BrowserPrintDevice from 'foo.js'

// 正确写法
import { BrowserPrint, BrowserPrintDevice } from 'foo.js'

改完导入语法之后就能正常实例化、调用类方法了。

2. 补充注意事项

• 你封装的类方法目前没有加返回值，比如getDefaultDevice里调用_BrowserPrint的方法后没有return，会导致外部调用拿不到返回结果，需要补充return逻辑：

  getDefaultDevice(a, b, c) {
    return _BrowserPrint.getDefaultDevice(a, b, c)
  }
  

• 如果你不想自己封装ES6类，也可以直接用webpack的script-loader或者expose-loader处理原ES5文件，不用修改原文件代码就能直接用：
  1. 安装expose-loader：npm i expose-loader -D
  2. 导入时直接写：import 'expose-loader?exposes=BrowserPrint!./foo.js'
  3. 后续直接调用window.BrowserPrint.getDefaultDevice()即可，和你之前jQuery项目的用法完全一致。
• 你贴的原ES5代码里IIFE的return后面有换行，会触发JS自动分号插入规则，导致return undefined，如果你实际代码也是这么写的要记得把return和返回值放在同一行，避免逻辑异常。

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