问题标签 [browserify-shim]

如何使用 browserify 或 webpack 正确填充 javascript 而无需额外文件？

让我们以使用 react 或 react-redux 为例。我在 package.json 中有这个配置：

在我的项目中，我将 react-redux 与 line 一起使用import { createStore, applyMiddleware } from 'redux';，并添加了 react-redux 作为依赖项。当我编译我的项目时，它会生成一个大约 20K 行的 javascript 文件。

问题是，当我填充 react-redux 时，通过使用 react-redux 的 cdnjs ( https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.0/react-redux.js) 并将其添加到 browserify-shim 配置中，我的项目仅使用大约 2K 行，而仅 react-redux js 文件仅使用大约 700 行（该项目仍然有效！）。

为什么会发生？我可以不在 browserify-shim 中添加 react-redux 但仍然只在我编译的项目 javascript 中添加 700 行而不是 18K 行吗？

这里实际发生了什么魔法，魔法实际上是如何起作用的？

我对 browserify-shim 和 bootstrap-datetimepicker 有疑问。Bootstrap-datetimepicker 需要 moment.js 但是这个插件必须先加载然后 datetimepicker。我的代码：

然后我只需要它。

但是当我使用它时，控制台抛出错误。未捕获的错误：bootstrap-datetimepicker 需要先加载 Moment.js

我如何先加载 Moment.js？

谢谢！:)

我怎么称呼它：

所以我有一个 React 项目，我实际上是在使用 react-lite 进行部署，因为占用空间要小得多。我想使用react-nouislider，但在它的 package.json 中，我发现了这个：

这意味着每当我需要 react-nouislider 时，它都会引入 React 而不是 react-lite。如何从我的顶级 package.json 中填充 npm 包的依赖项？

这就是我在 react-lite 中填充的方式：

我试过这个，但没有奏效：

如何填充包本身的依赖项？

我有一个问题，react-sortable-mixin 不尊重我的 package.json 文件中的 browserify-shim global:Sortable 声明，从而导致 Sortable 模块被打包在我的包中。我在其他模块上遇到了类似的问题，所以这很可能是我的配置问题。我创建了一个小测试包，它只需要 React 和 react-sortbable-mixin 来演示问题：

包.json

index.js

react-sortable-mixin.js（只是模块的第一部分......）

这是 browserify 的诊断输出：

我知道全局匀场是有效的，因为 React 不包含在捆绑包中......但是如上所述，Sortable 被包含在内。此外，如果我只是 require('sortablejs') 而不是 index.js 文件中的 sortablejs/react-sortable-mixin，Sortable 将不会按预期包含在包中，所以我的想法是我的配置错误或模块react-sortable-mixin 的格式不尊重 browserify-shim。

任何帮助表示赞赏。

对于那些没有使用过的人来说soma.js，它是一个微框架，带有两个核心文件 -soma.js和soma-template.js. 他们都在npm，所以在我的项目中，我没有在我的页面中硬编码cdn url html，而是使用var soma = require('soma.js');和soma.template = require('soma-template');

但是，这不起作用。所以我开始深入研究，发现soma-template npm module source code看起来像这样：

如果我更改this为window，那么一切正常。然而，在理想的世界中，我不想在 npm 模块源代码中闲逛，我宁愿app.js以某种方式在我的主入口点中配置它。

几乎感觉我需要将当前的soma变量范围传递给它，但我不知道该怎么做..

任何帮助将非常感激。

生产服务器上的 node_modules 文件夹是用于持续部署目的的符号链接。当我运行 gulp 命令时，我遇到了很多这样的错误： Error: Unable to find a browserify-shim config section in the package.json for /home/web/www/persist/node_modules/jquery-ui/jquery-ui.js while parsing file: /home/web/www/persist/node_modules/jquery-ui/jquery-ui.js] filename: '/home/web/www/persist/node_modules/jquery-ui/jquery-ui.js' . . . 如果我将 node_modules 移动到项目文件夹中，则构建过程是成功的。如何解决这个问题呢？

我有一个文件需要我从 NPM 安装的模块：

该模块依赖于window范围中存在的 jQuery 变量，但是当我浏览它时，我知道我需要填充它。因此我已经安装了 browserify-shim 并像这样使用它（来自 package.json）：

但是，当jquery-form运行时，jQuery未定义。我错过了什么？

我的 package.json 文件中有以下内容：

然后在我的一个 JS 模块中：

然后我在浏览器中收到以下错误：

tether.min.js:1 未捕获类型错误：无法设置未定义的属性“系绳”

但是，如果我不尝试填充 Tether 而只是window.Tether在需要它的模块中使用它，它就可以正常工作。

有谁知道为什么 browserify-shim 不能以这种方式为 Tether 工作？

我将ng-forward库与browserify, 和 browserify一起使用@reactivex/rxjs到包中。如何防止这种情况？我试过browserify-shim了，但它不起作用。配置是：

我正在尝试使用一个名为tipso的工具提示插件。我使用 angular 和 browserify 作为我的依赖管理器。

除了这个插件，我已经为我准备好了一切。在 browserify 中，每一件小事都变得更加困难，但这似乎正在变成一场噩梦。

我遵循了tipso的文档，这非常简单。但是当我运行该应用程序时，我不断收到一条错误消息，说明Uncaught TypeError: $(...).tipso is not a function在 chrome 控制台中。

这是我的 broserify-shim 配置

我需要tipso

这就是我初始化tipso的方式

任何建议将不胜感激。