问题标签 [umd]

设置 ES6 库以使其模块化并转换为一个 ES5 UMD 文件的最佳方法是什么？我查看了 async.js 和 lodash 的做法，但很难理解发生了什么。

例如index.js：

和doSomething.js：

这样用户就可以执行以下操作：

我对 Babel 没有运气，因为transform-es2015-modules-umd没有正确评估路径，而且 Babel 也没有将它全部捆绑到一个 ES5 文件中。有人有这样的简单例子吗？

我想使用React Virtualized Select在选择下拉列表中显示近 100 万条记录。我已经创建了基于flask和angularjs的项目。我无法通过 angularjs 找到此类下拉列表的任何资源，因此我决定使用 react.js 和 angular.js 来获取此选择下拉列表。

来到我的问题，请在下面找到我到目前为止尝试过的代码。由于我没有使用 nodeJS，我不能使用“require”或“include”，它们在这些下拉菜单中起主要作用，但幸运的是他们为“react-virtualized-select”提供了 UMD javascript 文件，所以我最后包含了这些脚本的 HTML 正文，但是当我运行代码时，我在控制台中收到错误

嵌入式：20 未捕获的 ReferenceError：未定义 VirtualizedSelect

有人可以告诉我我是否以正确的方式实施反应，或者我对 UMD 文件的理解有误吗？提前致谢。

更新：我创建了一个突出问题的 JS Fiddle，我还根据 SO 的评论对代码进行了一些更改。

JSFiddle Demo

如何让 webpack 将我的模块直接暴露给浏览器，而不是使用模块名称Module.default？

这是我以简化方式设置的应用程序，希望能描绘出我希望实现的目标。

webpack.config.js

.babelrc

应用程序.js

因为我在输出中将“App”指定为“库”，所以我的库在浏览器中以App.

奇怪的是......为了使用导出的默认功能，我必须这样做App.default。但是要使用other导出的功能，我可以这样做：App.other. 我希望我可以App()调用默认导出函数，而另一个是相同的App.other()。

这是浏览器中的标准行为还是带有 webpack 的 UMD 包装库？这似乎并不模仿 lodash 库的行为。我的配置是否以某种方式关闭？

但是，如果您在浏览器中查看lodash 库（repo），您会发现他们实现了它。

Lodash 是使用 webpack 构建的。如果您查看 lodash 的 package.json 内部，您可以看到主文件是lodash.js. 如果您查看该文件，它似乎是 UMD 包装的（文件底部的 UMD 定义）。因此，当我执行以下操作时：

一切正常。

另一件可以正常工作的事情是在 HTML 文件中引用该确切文件：

这允许我访问 lodash 对象。

我怎样才能得到相同的行为。Lodash 的 webpack 配置比我需要的要复杂得多，并且不确定我需要进行什么逆向工程。

我已经松散地遵循此链接来创建我的反应组件以进行分发。我的 webpack 生产版本如下。

然而，考虑到单个文件大小组合起来大约是大小的 1/10，我的构建结果比我预期的要大得多。特别是我的源 js 和更少文件的文件大小，加起来只有 1.6kb。然而，构建在 13kb 时要多出约 10 倍。

我的组件非常简单和相似。我有一个 FlexTable、一个 FlexTableRow 和一个 FlexTableCell 文件。它们都具有与以下相同的签名，但具有不同的style.less. 在我style.less看来，它基本上是几行 cssdisplay: flex; flex: 0等等。总而言之，非常少的 js 和非常少量的 css。

那么问题来了，为什么产品会从 1.6kb 膨胀到 13kb？我究竟做错了什么？

我的-flex-table.js

（将上面的 FlexTable 替换为 FlexTableRow 或 FlexTableCell 就可以得到我的其他文件了）

我package.json指向一个索引文件，该文件使用 module.exports = {FlexTable, FlexTableCell, FlexTableRow} 简单地导出所有这三个文件

webpack 生产脚本运行：

NODE_ENV=production node_modules/webpack/bin/webpack.js --config webpack.config.prod.js

Webpack 生产脚本

我正在开发一个 javascript 库，它使用闭包编译器来组合/缩小和类型检查。为了避免噘嘴全局命名空间，我想使用 UMD 模式并关闭@export(or goog.exportSymbol('workspace', lkr.workspace)

我使用了一个输出包装器文件来生成 UMD 包装器

参考：https ://medium.com/reflecting-on-bits/how-to-solve-missing-output-error-when-using-closure-compiler-7de6eac29776?swoff=true#.ntq9vav6s

1. 这是关闭 UMD 模式的正确方法吗，编译器中似乎有内部支持来检测 UMD，但我找不到任何示例。 https://groups.google.com/forum/#!topic/closure-compiler-discuss/-M1HBUn35fs https://github.com/google/closure-compiler/pull/1048
2. 我仍然会崩溃，似乎找不到工作区。

例子

开始.js

编译标志

使用 UMD 包装器输出

错误：

我正在改变 TypeScript 库的构建方式，从gulp concat + typescript编译器到 Webpack。

该库现在可以与require/import关键字一起使用。但是，我必须保留以经典方式使用库的能力，包括将脚本放入 html 标头。

在所有函数/变量都隐藏在全局变量 Survey下之前。为了实现这一点，使用了打字稿 namespace Survey {}，并且所有需要类/变量都使用export关键字。

我必须删除命名空间，现在，为了实现同样的效果，拥有一个全局变量，我必须将所有需要的导出类/变量包含到构建入口点文件中：

https://github.com/dmitrykurmanov/surveyjs/blob/bd62cd7388960a0230767b3bcf97e6332ee99cf3/src/entries/koBootstrapIndex.js

有没有其他方法可以实现相同的目标，而无需创建这个庞大的列表？

我是 UMD 和 AMD 的新手。我在 Browserify 中编写了一个 JS 库，我刚刚遇到了 UMD。我的理解是，如果我为每个模块都包含一段代码，我的模块应该能够在 CommonJs 和 AMD 中使用。

这是我的示例模块。

./src/main.js

./lib/lib1.js

这就是我使用 browserify 打包所有内容的方式

当我想使用这个模块时，我就这么做了。

我的问题是，如何将我的模块转换为 UMD，以便它可以包含在 CommonJS 和 AMD 中。

我正在尝试将一个巨大的客户端应用程序从 Angular 1.x 升级到 Angular 2，但我遇到了一个非常烦人的障碍。我用一个虚拟的轻量级项目（粘贴在下面的文件）重新创建了这个问题，但让我先解释一下这个问题。

基本上，当我将tsconfig.json模块指定为时commonjs，我在 chrome 开发控制台中收到以下错误：

app.module.ts:1Uncaught ReferenceError: 要求未定义

当我将模块切换到 时system，出现以下错误：

未捕获的 TypeError：无效的 System.register 调用。匿名 System.register 调用只能由 SystemJS.import 加载的模块进行，而不能通过脚本标签进行。

当我将模块切换到 时umd，一切正常。但鉴于角度本身建议使用commonjs，我担心这umd不是正确的答案。但是，如果我错了并且umd完全没问题，我很想听听一个很好的解释。

这是我重现我的问题的代码：

tsconfig.json：

打字.json：

systemjs.config.js ：

包.json：

应用程序.js：

app.module.ts ：

appCtrl.ts ：

升级适配器.ts：

我错过了什么？

我正在研究图书馆调查

它使用gulp+webpack构建 umd 包。

我想创建用于打字稿项目的类型定义包（或者可能只是多个 d.ts 文件）。我想要这样的东西：

Survey.* 的所有内容都在此处描述： https ://github.com/dmitrykurmanov/surveyjs/blob/master/src/entries/ko.ts

我尝试使用：github.com/SitePen/dts-generator和github.com/TypeStrong/dts-bundle但没有成功，有人可以告诉我正确的方向吗？

我正在尝试将 ng2-bootstrap 与 angular2 和 asp.net 核心一起使用。

我在 package.json 中引用了 "ng2-bootstrap": "^1.0.24"

当我尝试引用 node_models/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js 我收到以下错误

未捕获的错误：模块必须作为 AMD 或 CommonJS 加载

我该如何解决这个问题？谢谢马丁