问题标签 [umd]

我正在尝试使用Webpack将两个 require amd 模块组合成一个 combine.js javascript 文件。

模块1.js

模块2.js

推荐的良好做法

在 requireJS wiki 和其他来源中，作为一种好的做法，他们明确建议不要为每个模块设置名称，而是将其保持匿名，没有 id： https ://github.com/requirejs/requirejs/wiki/Updating-existing -图书馆#anon

“通常你不应该注册一个命名模块，而是注册为一个匿名模块...... ”

WebPack - 将模块组合在一个 js 文件中

[webpack.config.js]

[Ejecute WebPack 结合]

WebPack - 输出 - combine.js

https://pastebin.com/Dy9ZcgAc

尝试使用 RequireJS 加载 combine.js 文件和模块

[索引.html]

问题

加载 combine.js 文件时，我总是得到组合文件中定义的第一个匿名模块。而且我不知道如何获取第二个模块，它从未在 requireJS 变量中设置：window.requirejs.s.contexts._.defined

附加信息

如果我在每个模块的define('name',..) 中使用'id name' 构建模块，它会完美运行，并且我可以完美加载它们，但如上所述，命名你的不是一个好习惯模块。

问题

1. 如何将这些匿名模块合并到一个 combine.js 文件中，使用 requireJS 加载该文件，然后获取每个模块？
2. 代码中可能有问题吗？
3. 我查看了 requireJS 变量：window.requirejs.s.contexts._.defined以查找所有模块，但第二个模块从未添加到那里。所以我想这可能是我正在使用的 UMD 模式的问题，或者是 Webpack 不支持的功能。

我完全绝望地试图解决它，并且已经查看了许多资源，但找不到明确的答案。非常感谢

我想编写一个可以通过 NPM/Browserify 使用的单个 Javascript 模块：

或者通过链接到托管版本而不构建：

显然，我希望这两个版本的代码是不同的，但我希望能够从另一个（或两者都来自同一来源）自动构建一个。

我知道UMD（通用模块定义）是解决方案的一部分，unpkg.com 也是如此，但我不太明白如何将它组合在一起。

1. 编写普通的 Node 样式模块 ( module.exports.foo = ...)
2. ...做一些事情来在一个名为的目录中构建模块的 UMD 版本/umd
3. 添加/umd到 的files: []属性package.json。
4. 发布到 npm
5. 现在它在 unpkg.com 上

如果正确，第 2 步是什么？我目前没有使用任何构建工具，因为这个模块非常简单。

如果在浏览器中访问它，将通过什么变量名访问模块（mymodule在我上面的示例中）？

在使用 Typescript 和 Webpack 的项目中，我想强制将通常的全局库（例如 jQuery）视为 UMD 全局变量。

现在，如果我import * as $ from 'jQuery'在我引用的文件中省略$，webpack 会成功，但脚本在运行时会失败。但是，import * as _ from 'lodash'在省略时会导致 webpack 构建失败，从而具有预期的行为。

考虑以下文件：

第一个.ts

第二个.ts

索引.html

包.json

tsconfig.json

webpack.config.js

有没有办法可以在所有 .ts 文件中强制执行导入语句？

我正在尝试将 Typescript UMD 模块（当 require() 不存在时不会回退到全局变量）与不属于任何模块模式的遗留代码一起使用。

我希望 Webpack 有一个加载器或插件，可以为特定模块创建全局变量（而不是将它们作为模块加载）。

例如，我在 Node 包中有 Typescript UMD 模块：

哪个导出函数

我想在我的遗留代码中使用它：

目前我最好的解决方案是加载我所有的共享模块并手动将它们分配给全局变量。当然这并不理想。

Webpack 可以做到这一点吗？还有其他解决方案吗？

谢谢

我正在研究 angular2 + typescript 应用程序。

我看到@angular 包是如何工作的：

如果你安装@angular/common，你的node_modules文件夹中会有：

所以，多亏了index.js....以及所有转译的代码src，导入喜欢

import { NgModule } from "@angular/core";让我编译应用程序；

但是，在我的 output/dist 文件夹中，我没有也没有转译文件，这要归功于 SystemJs，它使使用库变得非常简单 ：index.js.umd.js

我正在寻找的是即使使用 webpack 也能做到这一点的方法；

我自己用 webpack 创建了一些库/包，我想在我的 webpack 应用程序中使用它们。

在node_modules应用程序的文件夹中，我将具有与角度包相同的结构：

所以我可以使用index.js和src编译语句

import { libClass } from "mylib1";....但...

至于 SystemJs，我将负责将 JUST 包复制到我的 output/dist 文件夹中，然后...

1) 我不想将它们放入 Vendor 捆绑包中；

2）我不想使用他们的转译代码通过应用程序的 webpack 配置创建一个新包。

你能帮助我吗 ？？

更具体地说，我只想在我的 webpack 应用程序中使用第三方库；

因此，在我的应用程序的任何其他部分附近，app.js我希望有一些外部捆绑库来使用它们。vendor.jsindex.html

我有一个包，它由 Typescript 编译为 UMD，然后由 Webpack 转换为全局变量（我们必须使用 Typescript，因此不能选择更灵活的 UMD 模式）。我希望使用包的应用程序能够选择他们需要的。这些将部署到本地 NPM 注册表。

目前，我有一个 package.json 列出了所有必需的依赖项和构建脚本。我不介意发布两个不同的包（可能针对不同的范围，即@my-umd-packages\my-package，@my-globals-packages\mypackage但我希望为所有依赖项和脚本保留一个包，因为除了最后一步之外，它都是相同的。

最简洁的方法是什么？main可以在具有不同属性的两个地方发布单个包吗？

谢谢你的帮助

我有编译为UMD的库（ Tus.io ） 。我在我的 Angular2/4 项目中需要它。当我使用 npm 安装它（npm install tus-js-client）并导入它（var tus = require("tus-js-client");）时，我得到的错误是：

我使用requirejs来管理我项目中的 javascript 文件。但是，我想使用一些不符合AMD格式的外部库。我想要包含的库是barba.js。这将如何使用requirejs的包加载功能来完成？理想情况下，我想在不运行转换工具的情况下包含一个 commonjs 模块。

这是我的HelloWorldModuleUMD：

当我将它导入我的 Angular 应用程序项目并运行时，ng build我收到以下错误：

这是我的 Angular 应用程序的依赖项：

我的应用程序或 UMD 有问题吗？我怎样才能解决这个问题？

我有一个用 Typescript 2.3.4 编写的相当大的库，它导出了很多 ES6 模块和类。我现在需要在较旧的浏览器应用程序中使用该库，用打字稿编写但仅使用内部模块。我设法使用汇总构建了该库的浏览器版本（从而污染了全局命名空间），并且在运行时运行良好！

我现在的问题是在用作全局库时为库生成类型（.d.ts）。

我的代码是从包含如下内容的单个 index.ts 文件开始编译的：

我在 es6 模块中构建库，然后使用汇总获取一个整体 umd 文件，该文件在浏览器环境中加载时会在“窗口”全局中创建一个名为 DDDTools 的单个属性，其中包含所有导出的模块，如下所示

如果我使用内部模块（命名空间）而不是外部模块开发库，这正是我将获得的。

由于该库是使用外部模块开发的，因此我无法使用 tsc 编译器生成的 d.ts 文件，这些文件包含以下内容（对于 Utils 模块）：

以对象迭代器为例

如果我将打字稿源中的库用作外部模块，这些 .d.ts 很好，所以我可以编写

但是我如何对存在一个名为 DDDTools 并且包含它导出的所有模块的全局的打字稿说？

我的第一次尝试是：

但这使我的文件成为外部模块，而我可怜的浏览器应用程序（包含很多文件）仍然基于名称空间（内部模块），不再编译。

我想我需要一种方法来创建一个 .d.ts 包含这样的东西

我对吗 ？如果是的话，有没有办法让它“自动”？我尝试使用 tsc 并将模块选项设置为“system”（或 amd），并使用 outFile 选项将所有内容输出到单个文件，但得到了这样的结果：

这真的非常接近我需要的东西，如果它declare module "DDDTools/Utils/ObjectIterator"可以成为declare namespace DDDTools.Utils.ObjectIterator......但你知道它不是

任何帮助将不胜感激！