如何使用 Laravel Mix Webpack 导入 JS UMD 模块答案

【问题标题】：How to import a JS UMD module with Laravel Mix Webpack如何使用 Laravel Mix Webpack 导入 JS UMD 模块
【发布时间】：2021-09-17 05:51:26
【问题描述】：

我有一个结构如下的 JS 插件：

(function(global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.myPlugin = factory());
}(this, function() {
    'use strict';

    /**/
    const myPlugin = (function(options) {
        const api = {};
        return api;
    });

    return myPlugin ;
}));

我正在尝试将此插件加载到由 Laravel mix 创建的 app.js 文件中。为此，在 app.js 我有以下内容：

try {
    window.myPlugin = require('./app/plugins/myplugin.js');
} catch (e) {}

现在，该文件实际上是在 app.js 中导入的，但是当我尝试在另一个 JS 文件中使用 myPlugin 时，我收到错误 myPlugin is not a function

const pluginVar = myPlugin(options);
//myPlugin is not a function

如果我尝试console.log(typeof myPlugin)，我会得到Object。

【问题讨论】：

标签： javascript laravel webpack laravel-mix umd

【解决方案1】：

解决方案非常简单：

try {
    require('./app/plugins/myplugin.js');
} catch (e) {}

我猜是因为插件代码已经分配给函数（全局，工厂）iife内的窗口。

【讨论】：