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

Question

我有一个具有以下结构的 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。

Answer 1

解决方案非常简单：

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

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

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

How to import a JS UMD module with Laravel Mix Webpack

javascript

laravel

webpack

umd

laravel-mix