如何在WebPack构建的CommonJS项目中导入Epson JavaScript SDK

Alright, let's figure out how to get that non-CommonJS ePOS SDK working in your Webpack-based project. I’ve run into this exact scenario with legacy SDKs before, so here are four solid approaches you can try:

1. 直接通过Script标签引入（最简单直观） #

This is the quickest way if you don’t mind loading the SDK separately from your Webpack bundle:

• Place your epos-2.7.0.js file in your project’s static assets directory (like public/js/).
• Add a script tag to your entry HTML file to load the SDK:

  <script src="/js/epos-2.7.0.js"></script>
  

• In your CommonJS modules, you can now access the SDK via its global variable (most legacy SDKs attach themselves to window—check the SDK code or browser console to confirm the exact name, like window.EPOS):

  // In your module file
  const epos = window.EPOS;
  // Use the SDK methods as needed
  epos.initialize({ /* config */ });
  

• Note: If you’re using TypeScript, add a global declaration to avoid type errors:

  // In a .d.ts file
  declare var EPOS: any;
  

2. 使用Webpack的externals配置（将SDK排除在Bundle外） #

If you want to treat the SDK as an external dependency (so Webpack doesn’t bundle it), use the externals option:

• Add this to your webpack.config.js:

  module.exports = {
    // ... 你的现有配置
    externals: {
      'epos-sdk': 'EPOS' // 键=你导入时用的名称；值=SDK挂载的全局变量名
    }
  };
  

• 现在你可以像导入普通CommonJS模块一样使用它：

  const epos = require('epos-sdk');
  // 如果你的项目支持ES导入语法也可以用
  // import epos from 'epos-sdk';
  epos.printReceipt({ /* 数据 */ });
  

• 别忘了还是要在HTML里通过script标签加载SDK（和方法1一样）。

3. 用exports-loader包装成模块（将SDK打包进Bundle） #

如果想让Webpack把SDK打包进你的构建文件，用exports-loader把它的全局变量转换成CommonJS模块：

• 首先安装loader：

  npm install exports-loader --save-dev
  

• 方式1：在webpack.config.js中添加规则：

  module.exports = {
    module: {
      rules: [
        {
          test: require.resolve('./path/to/epos-2.7.0.js'), // 替换成你的SDK实际路径
          use: 'exports-loader?exports=window.EPOS'
        }
      ]
    }
  };
  

• 方式2：在代码中直接通过loader导入：

  const epos = require('exports-loader?exports=window.EPOS!./path/to/epos-2.7.0.js');
  

• 现在你就可以像使用其他导入模块一样使用这个SDK了。

4. 手动将SDK包装成CommonJS模块（最灵活） #

如果需要添加自定义初始化逻辑或校验，可以创建一个包装模块：

• 新建一个文件比如epos-wrapper.js：

  // 加载SDK文件
  require('./epos-2.7.0.js');
  
  // 可选：添加校验确保全局变量存在
  if (!window.EPOS) {
    throw new Error('ePOS SDK加载失败');
  }
  
  // 导出SDK供其他模块使用
  module.exports = window.EPOS;
  

• 在你的项目模块中导入这个包装文件：

  const epos = require('./epos-wrapper.js');
  epos.connect({ /* 连接信息 */ });
  

• 这种方式可以让你在向应用暴露SDK之前，添加额外逻辑（比如默认配置或错误处理）。

在选择方法之前，一定要确认ePOS SDK创建的全局变量是什么——打开epos-2.7.0.js查找类似window.EPOS = ...的代码，或者加载脚本后在浏览器控制台测试。

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