【问题标题】:Webpack build for application with core and sub modulesWebpack 为具有核心和子模块的应用程序构建
【发布时间】:2016-08-24 14:38:39
【问题描述】:

我正在尝试使用 webpack 构建一个应用程序,但发现了一个问题。该应用程序的堆栈是 React + Flux 架构(可用 ES6 语法),而对于构建系统,我使用的是 webpack。我要解决的问题是构建应用程序系统的想法,该系统分为核心模块和位于子目录核心内的子模块。核心系统应提供基本功能(如调度程序、基本 Flux 操作和核心视图模块),插件应能够导入核心功能以扩展应用程序。

当前的构建解决方案允许我构建应用程序,但我遇到了可能重复的模块问题。我创建了位于核心模块中的 Plugin 存储以及允许在核心中注册不同模块的 registerPlugin 操作。

核心模块在 index.js 文件中有插件的入口点,我在其中导出可重用组件和操作(也用于注册插件)。

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

该文件随每个插件一起导入,让我可以访问这些模块。

// bootstrap plugin / entry point for plugin webpack
import {registerPlugin} from 'core-module';

// plugin index.js
require('./dist/plugin');

此外,每个插件都会公开 index.js 文件,该文件会为核心返回捆绑产品。然后核心简单地抓取该文件并在引导过程中将其导入。

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

一切运行良好,但后来我发现(可能)依赖项重复存在问题。当我尝试从核心调试代码时,似乎正在调用为操作注册的插件商店,但每个商店都是不同的实例,所以基本上当我在核心模块中收听商店更改时,我看不到该更改(因为一些不同的商店发生了变化,可能有两个调度员在这里,也许有两个动作......)。

这是循环依赖的问题吗?有什么方法可以配置 webpack,使其不会重复该操作?

另外值得一提的是,每个插件都有自己的 webpack 配置,它允许我为插件创建包,并且该包被核心模块抓取,然后核心模块的 webpack 正在为整个应用程序创建包。

【问题讨论】:

  • 你的 webpack 插件是什么?我知道如果您添加 webpack.optimize.DedupePlugin(),webpack 将在可能的情况下对您捆绑的代码进行重复数据删除。
  • 我尝试过使用 DedupePlugin(在创建 dist 版本期间),但没有帮助

标签: javascript reactjs ecmascript-6 webpack flux


【解决方案1】:

为什么不全局公开你的核心对象?
然后你可以使用ES6 destructuring来破坏它。
有些人可能会说全局变量是一个糟糕的主意,不使用它们是 ES6 和 commonJs 模块背后的主要思想,他们是对的,但在这种特殊情况下,将核心模块的主要功能暴露为单个对象(请不要' t暴露一切!)将来会为您节省很多麻烦。

【讨论】:

  • 另外我真的不知道你的确切 webpack 配置所以这是我想到的第一件事。
猜你喜欢
  • 1970-01-01
  • 2020-12-03
  • 2017-10-10
  • 1970-01-01
  • 1970-01-01
  • 2021-02-15
  • 1970-01-01
  • 2020-02-27
  • 2021-07-03
相关资源
最近更新 更多