Webpack for applications with basic and auxiliary modules

Question

I am trying to create an application using webpack but have encountered a problem. The stack is for the React + Flux Architecture application (ES6 syntax is available) , and for the build system I use webpack. The problem I'm trying to solve is the idea of ​​creating an application system, which is divided into the main module and submodules that lie inside the kernel in a subdirectory. The main system should provide the basic functions (such as the dispatcher, the basic Flux actions and the kernel module), and the plugins should be able to import the main functions to expand the application.

The current build solution allows me to build an application, but I have a problem with modules that are probably duplicated. I created the Plugin repository, which is located in the main module, as well as the registerPlugin action, which allows you to register various modules inside the kernel.

The base module has an entry point for plugins in the index.js file, where I export the restored components and actions (also for registering the plugin).

// core index.js export * as AppDispatcher from './src/dispatcher/AppDispatcher'; export BaseModel from './src/models/BaseModel'; export registerPlugin from './src/actions/registerPlugin'; // etc.. 

This file is imported with each plugin and gives me access to these modules.

 // bootstrap plugin / entry point for plugin webpack import {registerPlugin} from 'core-module'; // plugin index.js require('./dist/plugin'); 

Each plugin also provides an index.js file that returns a related product for the kernel. Then the kernel simply grabs this file and imports it during the boot process.

 // bootstrap app / entry point for webpack import 'plugins/plugin-1'; import 'plugins/plugin-2'; ... 

Everything worked fine, but then I discovered a problem with (possibly) duplicate dependencies. When I tried to debug the code from the kernel, it seems that the plugin store registered for the action is called, but each store has different instances, so basically, when I listen to the storage change in the main module, I do not see this change (because some then another store, maybe two dispatchers here, and maybe two actions ...).

Is this a circular dependency problem? Is there a way to configure the web package so that it does not duplicate these steps?

It is also worth mentioning that each plugin has its own webpack configuration, which allows me to create a package for the plugin, and this package is captured by the main module, and then webpack for the main module creates a package for the entire application.

Answer 1

Why don't you disclose your main subject globally?
Then you can destroy it using ES6 destruction .
Probably some global variables are a terrible idea, and not using them is the main idea of ​​ES6 and commonJs modules, and they are right, but in this special case, revealing the main functions of the main module as a single object (and, please, t expose everything!) In the future will save you a lot of complications.