Javascript 使用Webpack和Laravel Mix解析动态模块

一天中的好时光

最近我一直在尝试为我的项目实现动态模块加载功能。然而，在过去的几个小时里我都失败了。为了让您了解我试图实现的目标，这里是项目的结构

• 插件
  • 显影剂
    • 资产
      • scss
        • developer.scss
      • js
        • developer.js
• 主题
  • 主题名称
    • webpack.mix.js
    • 节点单元/
    • 来源
      • js
        • application.js
        • bootstrap.js
      • scss
        • application.scss
        • _变量.scss

因此，为了获得可用的插件，我做了以下功能

/**
 * Get all plugins for specified developer
 * which have 'assets' folder
 * @param developerPath
 * @param plugins
 */
function getDeveloperPlugins(developerPath, plugins) {
    if (fs.existsSync(developerPath)) {
        fs.readdirSync(developerPath).forEach(entry => {
            let pluginPath = path.resolve(developerPath, entry),
                assetsPath = path.resolve(pluginPath, 'assets');
            if (fs.existsSync(assetsPath))
                plugins[entry] = assetsPath;
        });
    }
}

此函数为指定的开发人员加载所有可用插件，然后进入并查找assets文件夹（如果存在），然后返回它，我们可以稍后使用提供的目录

下一步是为每个插件生成引用（指向developer_name.js文件的直接路径），这些插件稍后应该“混合”到一个plugins.bundle.js文件中

为了实现这一点，下面的代码“出现”

_.forEach(plugins, (directory, plugin) => {
    let jsFolder = path.resolve(directory, 'js'),
        scssFolder = path.resolve(directory, 'scss');
    if (fs.existsSync(jsFolder)) {
        webpackModules.push(jsFolder);
        let possibleFile = path.resolve(jsFolder, plugin + '.js');
        if (fs.existsSync(possibleFile))
            pluginsBundle.js[plugin] = possibleFile;
    }
    if (fs.existsSync(scssFolder)) {
        webpackModules.push(scssFolder);
        let possibleFile = path.resolve(scssFolder, plugin + '.scss');
        if (fs.existsSync(possibleFile))
            pluginsBundle.scss[plugin] = possibleFile;
    }
});

在我开始编辑网页包配置之前的最后一步是为所有插件和所有开发人员获取SCS和js文件的文件夹：

let jsPluginsBundle = _.values(pluginsBundle.js),
    scssPluginsBundle = _.values(pluginsBundle.scss);

这就是问题开始出现的地方。我在GitHub上（在各自的存储库中）尝试了许多解决方案，但我失败了很多次

我现在唯一的错误是：

ERROR in F:/Web/Projects/TestProject/plugins/developer/testplugin/assets/js/testplugin.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to "F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js"

是的，我知道webpack.mix.js文件应该在项目的根文件夹中，但是，我只是在开发主题，它使用团队其他成员开发的模块。
所以，我们的想法是：

ERROR in F:/Web/Projects/TestProject/plugins/developer/testplugin/assets/js/testplugin.js
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to "F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js"

• 启动构建过程：npm运行开发产品
• 自动为所有需要的开发人员加载插件
• 使用插件提供的方法和html标记（它是用于API路由的PHP和用于组件等的Vue.js的混合体），如下所示：

我真的很感激你的帮助，我只是想不通这个错误。如果您需要更多信息，我随时准备提供帮助，因为我自己需要帮助来解决此问题=）

更新：mix.webpackConfig（）使用的最新网页包配置（尽管仍然失败）

这是

webpackModules

变量的内容：

[ 
  'F:\\Web\\Projects\\TestProject\\themes\\testtheme\\node_modules',
  'F:\\Web\\Projects\\TestProject\\themes\\testtheme',
  'F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\js',
  'F:\\Web\\Projects\\TestProject\\plugins\\developer\\testplugin\\assets\\scss'
]

---

好的，7个小时后，我决定尝试最明显的方法来解决这个问题，在项目的根目录中创建node\u modules文件夹，并在那里安装laravel mix，效果非常好

看起来，如果它在网页包根范围之外的目录中找不到模块，它将沿着树查找节点\u modules文件夹

开发人员应该允许我们为Webpack设置根文件夹，以获取我想的所有模块，但无论如何，问题已经解决了