问题标签 [umd]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
233 浏览

javascript - 角窗注入

例如,当需要并与 webpack 或任何其他模块捆绑器捆绑时,是否可以防止角度实例注入全局(窗口)范围?

我发现 angular npm 包中的当前主要 javascript 文件是:

我的 webpack 入口文件内容是:

因此,主要的 webpack 任务是防止将变量泄漏到全局范围,但是如果我尝试像这样在 Chrome DevTools 中记录角度:

我会看到,那个角度实例被注入了。有什么想法可以防止这种情况吗?

附加信息:
Angular.js 版本 - 1.6.0-rc.0
Webpack 版本 - 2.1.0-beta.27

更新。

0 投票
1 回答
305 浏览

javascript - 角度指令的 UMD 模式

我希望在 npm 上开源一个 angular 指令,并且我正在尝试提出最通用的模式。这个怎么样?我有3个问题:

  1. 是否require('angular')需要或假设存在角度变量是否安全?
  2. 是否有必要在我的定义中调用angular.moduleandangular.directive或者应该只有消费应用程序这样做?
  3. AMD 环境需要这个module.exports还是全局就足够了?
0 投票
1 回答
728 浏览

angular - 如何创建所有脚本加载器都支持的 angular2 库

如何创建一个包含 Angular 2 模块的 javascript 文件,该模块可由其他应用程序使用,但在运行时直接从集中式服务器加载,并且未捆绑到特定应用程序的代码中?

将其视为 Angular 2 库的 CDN。要求是这个库的使用者将在他们的页面上包含一个脚本。

以这种方式实现它是一项要求,因此我对建议将库捆绑到单个应用程序的输出文件中的任何答案都不感兴趣。库脚本必须在运行时直接从库的服务器加载。

  • 集中式 Web 应用程序称为 CustomAuth
  • CustomAuth 有一个名为 Angular 2 的模块CustomAuthModule
  • CustomAuthModule 公开了几个可供外部 Angular 2 应用程序使用的服务和组件。

这是所需的工作流程(从高层次)。

  • 开发人员希望在名为 BookLibrary 的 Angular2 应用程序中使用 CustomAuth。
  • 在开发人员的索引页面上,他们添加了一个脚本 include 指向http://server-url/CustomAuth/script. 消费者不应该被要求知道任何关于像 systemjs 或 webpack 这样的模块加载器的知识。
  • 在他们的 angular2 代码中,他们从 CustomAuth 模块(服务、组件等)导入东西。
  • 当他们使用 angular-cli 编译他们的应用程序时,它不会包含 CustomAuth 代码,而是假定它将在运行时动态加载。

我对此进行了很多研究,但我没有运气弄清楚。任何帮助将不胜感激。

0 投票
1 回答
188 浏览

reactjs - 防止反应被捆绑在我的模块中,所以反应不能存在两次

我正在编写一个依赖于:

我已将它们添加为对等依赖项。

我已经创建了一个 webpack 构建,并且我已经生成了一个我想在我的应用程序中导入的“umd”模块。

问题是模块中依赖于 react-onclickoutside 的组件抱怨2 React 的存在。

这是可以切换并生成此错误的代码:

这给了我这个错误:

如果我查看我的 UMD 模块,我可以看到我的对等依赖项是捆绑的,这可能是我的应用程序中现在有两个 React 的原因。

我想知道如何防止 webpack 在我的模块中捆绑 React react

0 投票
1 回答
1324 浏览

reactjs - 如何管理 webpack umd 模块依赖(或创建 peerDependencies)

我用 webpack 创建了一个 UMD 模块,内容(没有压缩)以:

这个库依赖于react这个库中的一个signel组件:(react-dom通过react-onclickoutside包)。

当我用 webpack 构建这个库并尝试在项目中使用它时。我有一个错误,抱怨有两个 React 副本,第二个已捆绑。

所以我需要知道我对 Umd 模块的期望。

我不想构建 React,我希望 React 成为对等依赖项。

我应该将其react视为此 umd 模块的参数吗?

从 React 应用程序中,我如何加载这个模块?

如何排除 React?我已经尝试了大多数文档示例。

0 投票
2 回答
35928 浏览

javascript - 如何将库与 webpack 捆绑在一起?

我想创建一个前端库。因此我想使用 webpack。我特别喜欢 css 和图像加载器。但是,如果我使用 webpack,我只能需要非 JS 文件。因为我正在建立一个图书馆,我不能保证我的图书馆的用户也会这样做。

有没有办法将所有内容捆绑到 UMD 模块中以发布它?我尝试使用多个入口点,但是那时我不能要求该模块。

提前致谢

0 投票
1 回答
1157 浏览

d3.js - 使用 Visual Studio Code 汇总 @types/d3

我的图书馆项目使用...

  • 打字稿
  • 卷起
  • D3
  • @types/d3

package.json 文件有这些依赖

我的 rollup.config.js 文件配置了这些插件...

Rollup 可以很好地构建它。但是,在编辑器中,VSCode 在 d3 符号上显示错误。当我将鼠标悬停在它上面时,我看到了这个错误......

[ts] 'd3' 指的是一个 UMD 全局,但当前文件是一个模块。考虑改为添加导入。

我可以添加此导入以使错误在编辑器中消失。

但是,然后汇总失败...

无法从“...”解析“@types/d3”

有没有办法将 vscode 配置为不显示该错误,因此它不会淹没真正的错误?

是否有另一种方法可以在汇总项目中配置 D3 类型定义?

0 投票
1 回答
3436 浏览

typescript - 将带有 UMD 选项的打字稿编译成单个文件

我正在开发一个使用import/export样式语法作为模块的打字稿项目。我想将所有打字稿文件编译成一个文件。这是我的tsconfig.json 的样子,

当我运行tsc命令时,出现以下错误,

错误 TS6082:仅支持“amd”和“系统”模块以及 --outFile。

我不想使用 AMD 或 System,我想要 UMD,我该如何实现?

0 投票
1 回答
608 浏览

javascript - Webpack 输出带有 CamelCase 和脊柱案例名称的 UMD 库

如何配置 Webpack 以创建 UMD 包,以便 AMD 和 CommonJS 的包名称将以小写(脊柱大小写)命名,而全局上下文将具有 CamelCase 名称?

例如,我希望我的捆绑包以

这是它在 ReactDOM 中的样子:

0 投票
2 回答
922 浏览

javascript - 由于包名称中的连字符而令人困惑的 TypeScript 错误?

我已经构建了一个我想用作的 JavaScript/TypeScript 库:

  • 从 JavaScript 和 TypeScript 调用时的全局变量
  • 从 JavaScript 和 TypeScript 调用时通过 RequireJS 访问
  • 具有完整的单元测试覆盖率

这是一个使用 Webpack 打包的 UMD,并在此处作为 NPM 包部署 ( https://www.npmjs.com/~typed-contract )。如果你想要我正在处理的分支的全部源代码,你可以在这里找到它https://github.com/randarp/typed-contract/tree/feature/Issue_5.1

我的问题是我不能让它在所有情况下都工作,我的感觉是包名称中的连字符(即类型化合同)是罪魁祸首。一些例子:

  • 在 TypeScript 中,\Code\TypedContract.Specs\Contract.TypeScript.requireJS.spec.ts
    • 如果我使用import { contract } from "typed-contract"那么我的单元测试会失败,但 WebStorm 转译器说它是正确的。
    • 如果我使用import { contract } from "typedcontract"那么我的单元测试通过,但转译器说 Error:(4, 26) TS2306:File 'C:/Projects/TypedContract/Code/typedcontract.d.ts' is not a模块。
  • 我有一个外部 NodeJS 应用程序来测试它。在这种情况下:
    • 如果我使用import {contract} from 'typed-contract'它会按预期工作
    • 如果我使用import {contract} from 'typedcontract'它不会加载应用程序,因为它在 node_modules 下找不到 NPM 包。

我开始认为我需要弃用这个包并开始一个不带连字符的新包,除非有人可以提供一些关于可能发生的事情的线索,因为我的“排列编程”不起作用。