问题标签 [es6-module-loader]

我正在尝试将我的项目迁移到 ES6 模块，但遇到了一个问题。

我有 3rd 方脚本，它在 requirejs 的帮助下使用模块。让它命名为 3rdParty.js。它是通过凉亭获得的，因此没有能力并希望对其进行更新。

有什么方法可以导入 3rdParty.js，使用 ES6 语法而不从文件中删除定义函数？

所有当前的模块加载器都喜欢AMD,CommonJS,SystemJS使用变量定义将外部对象加载到当前模块范围内

喜欢：

或者：

如果您不知道需要从外部模块导入什么，或者只需要导入所有内容，这将成为问题，因为无法在运行时定义变量。

我想这是 ES6 翻译器不使用的主要原因

语法，它们不包含在 ES6 规范中。

因此，通过说动态模块范围，我的意思是模块变量可以在运行时定义/加载，这将允许将 ES6 语法扩展到以下内容：

在我看来，这是定义导入的更佳方式，而不是列出所有名称，例如：

现在我真正的问题：

为什么不使用with来实现这一点？

这是从 ES6 到 ES5 的简单示例翻译，可以解决问题：

文件：模块/module-1.js

至：

文件：模块/module-1.js

至：

with即使在转译器/加载器中，真的有必要避免吗？

我会感谢您对这些人的想法，因为我正在考虑编写另一个 ES6to5 翻译器和模块加载器。:)

我想更多地了解以下内容之间的差异，特别注意兼容性问题（不同的浏览器、缩小等）、性能和可读性/可维护性。

1. ES6：export和export default语法，与import {module1, module2} from.

2. AMDdefine()语法。

3. CommonJSrequire()语法。

是否更常见，更广泛采用？大会将走向何方，为什么？ES6 的下一步是什么，因为它似乎变化得如此之快。ES6 的模块加载语法是否存在历史原因/动机，下一步是什么？

在节点（common-js）中，我可以做类似以下的事情：

使用 es6/2015 模块，我目前正在使用类似的东西：

是否有可用的简写语法，或者这是完成所需行为的最简洁方式？

是否有人能够解释ES6 模块加载器（或像 System.js、Webpack 等的 Polyfills）的简单语句import和语句之间的区别？System.import

就像是

似乎是可能的，以及一个简单的

System.import在 import 语句之后唯一可能有回调吗？

正在努力让 AngularJS 应用程序在 ES6 上运行。从历史上看，我一直使用允许控制器文件向应用程序注册自己的模式，因为这样我就不用担心文件定义了什么控制器、服务等。使用 require() 我已经能够对依赖项和初始化进行排序，这样这很容易，并且可以专注于控制器文件。

考虑迁移到 ES6 并使用 import 而不是 require() 并且发现订单相关代码不再有效。附件是我想做的粗略近似（从不运行）版本。

我唯一想到的是可以从 index.js 中导出 RegisterIndexController() 函数，然后让 app.js 调用它。哪个有效，但想知道我是否可以以另一种方式推动依赖。控制器可以从 app.js 传递“app”

应用程序.js

index.js

索引.html

我们正在考虑将我们的一些 Angular 项目转移到 typescript 并在内部模块/命名空间方面遇到一些问题。

我们在 github 上发布了这个工作示例： https ://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

脚步：

这是应用程序的要点：index.ts

示例Ctrl.ts

ExampleTwoCtrl.ts

如前所述，这一切都很好。但我们宁愿将所有东西都放在这样的命名空间下：

然后像这样使用它：

这将正确编译运行 gulp 捆绑任务，但在浏览器中给出错误 /// ///

浏览器错误：

我有一个使用 jspm 和 system.js 的 ES6 设置，并为 bower 添加了一个注册端点。我需要那个端点，因为通过 npm 或 github 安装 Boostrap 并没有为 Bootstrap 提供必要的更少文件（不再）。

但是，我想使用一些 Bootstrap 插件（即崩溃）。由于它们是没有 AMD 或 CommonJS 语法的简单 jQuery 插件，因此它们需要全局 jQuery。

我完全不知道如何填充 system.js 的 config.js 文件来实现这一点。您可以像这样传递自定义覆盖

这似乎是填充 jQuery 插件的“官方方式”。

但是，我正在安装一个包含多个文件夹和文件的整个框架，而不仅仅是一个插件（因此，如上所述，Bootstrap 是通过 jspm 的 bower 端点安装的）

有什么建议么？

我有一个我正在为其开发测试的角度应用程序（混合了文件 ES5 和 ES6）。我使用 babel CLI 和这些选项 --modules system --module-ids 编译的 ES6 文件。假设我有这样的事情：

ES5 文件：

ES6 文件：

我有一个名为 boot.js 的文件：

在我的页面上，我导入引导文件（使用 es6-module-loader）并引导 Angular 应用程序：

现在，我假设我需要做一些类似于业力测试的事情——我需要在运行测试之前加载我的 boot.js。我解决问题的方法是在我的测试文件中调用 System.impot('boot') - 但似乎不正确：

有一个更好的方法吗？

我有这种情况，我试图导入一个现有的库，我将调用它troublesome（使用 Webpack/Babel FWIW），它有一个全局引用jQuery，我试图使用模块语法来解决它。

我已通过以下方式成功将 jquery 导入模块的“本地”范围：

所以我尝试了：

但也许并不奇怪，我得到了一些类似jQuery is not a function的东西troublesome.js

我也试过这个：

但是，事实证明这System.import是所谓的“模块加载器”规范的一部分，该规范是从 es6/2015 规范中提取的，所以它不是由 Babel 提供的。有一个poly-fill，但 Webpack 无论如何都无法管理通过调用来完成的动态导入System.import。

但是...如果我像这样调用 index.html 中的脚本文件：

对的引用jQuery已解决troublesome.js，一切都很好，但我宁愿避免使用脚本标签路由，因为 webpack 不管理这些路由。

任何人都可以推荐一个体面的策略来处理这样的场景吗？

更新

在@TN1ck 的一些指导下，我最终能够使用imports-loader确定一个以Webpack 为中心的解决方案

此解决方案的配置如下所示：