如何通过Laravel Mix Webpack导入JS UMD模块并解决调用报错问题

你的JS插件采用UMD规范打包，在CommonJS环境下本身会直接导出myPlugin函数，但Laravel Mix底层依赖的Webpack默认开启了CommonJS转ES Module兼容逻辑，会将CommonJS的导出内容包裹在模块对象的default属性下，你直接require拿到的是完整的模块对象而非内部的函数，所以typeof myPlugin返回Object，调用时报错不是函数。

方法1：导入时兼容处理（推荐） #

修改app.js中的导入逻辑，兼容两种导出场景：

try {
    const pluginModule = require('./app/plugins/myplugin.js');
    window.myPlugin = typeof pluginModule === 'function' ? pluginModule : pluginModule.default;
} catch (e) {}

方法2：改用ES6 import语法导入 #

将require替换为ES模块导入语法，可直接拿到default导出的函数：

import myPlugin from './app/plugins/myplugin.js';
window.myPlugin = myPlugin;

修改完成后重新执行npm run dev编译，在调用处打印console.log(typeof window.myPlugin)，返回function即可正常调用：

const pluginVar = myPlugin(options);

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