问题标签 [es6-module-loader]

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 回答
923 浏览

typescript - 针对 ES6 时 Typescript 中的外部模块

随着 Typescript 1.7 和 async/await 支持的发布,我认为现在是尝试使用 koa@2 的 Typescript 的好时机。

我有一个非常简单的设置,它已经可以工作了:

因为koa不是用Typescript写的,所以只好做了一个小定义文件:

这一切在 IDE 中运行良好(没有错误,自动完成也可以)。但是,当我将 (target => ES6) 编译为 Javascript 时,编译后的文件无法执行:

当我尝试运行它时,我收到以下错误:

它不起作用,因为 koa_1.default() 不是函数,它应该只是 koa_1()。(我也不确定为什么它会这样重命名变量)。如果我在生成的 app.js 中进行这个简单的更改,一切正常。

我正在阅读许多与打字稿和外部模块相关的文章,但我似乎仍然错过了一些东西。我在其中一个网站上找到了这个例子:source

这种解释了为什么要添加 .default,但据我了解,它是在错误的情况下进行的。(当我这样做时不需要它import Koa from 'koa';,但是当我这样做时import * as Koa from 'koa';

当我将 app.ts 中的 import 语句更改为import * as Koa from 'koa';生成的 app.js 时有效,但 Typescript 编译器和 IDE 给了我以下错误。

所以目前,我可以选择我的开发环境是否有效,或者生成的 Javascript 是否有效,但不能同时选择两者。

处理这个问题的最佳方法是什么?

我认为最简单的方法是将 koa.d.ts 定义文件更改为 match import * as Koa from 'koa';。但是,我没有做到这一点。

谢谢你的帮助!

0 投票
0 回答
119 浏览

javascript - 如何使用带有嵌套目录结构的 Traceur?

我想在我的下一个项目中使用 ES6,为此我使用 Traceur 作为转译器。我让它按照入门指南中描述的方式工作。但是,我想以他们在“离线编译”页面上描述的方式将我的所有源文件编译成单个缩小文件。但我无法让它与嵌套目录结构中组织的多个源文件一起工作。

这是一个解释问题的示例项目。它在根文件夹中有 index.html,在 src 下有两个 .js 文件。

索引.html

src/one.js

src/two.js

正如我所说,如果我在浏览器中打开 index.html,它将正常工作,将 Two 的实例打印到控制台。

但是当我尝试离线编译时,出现以下错误

如您所见,在编译 src/two.js 时,traceur 在输出目录下查找 src/one.js。我在 traceur 上找不到任何选项,可以让我自定义其搜索引用模块的根目录。我也尝试了该--dir选项,但它也失败了。

有什么建议么?

0 投票
3 回答
50338 浏览

javascript - Module.exports 和 es6 导入

与通天塔反应。我对导入和 module.exports 感到困惑。我假设在将 ES6 代码转换为 ES5 时,babel 会将导入和导出分别转换为 require 和 module.exports。

如果我从一个模块导出一个函数并将该函数导入另一个模块,代码执行得很好。但是,如果我使用 module.exports 导出函数并使用“import”导入,则会在运行时抛出错误,说明它不是函数。

我做了一个例子。

我使用带有预设 es2015 的 babel 来转编译它。这给了我以下错误

未捕获的 TypeError: (0 , _animals.Tiger) 不是函数

但是,如果我删除并将其module.exports = Tiger;替换为export { Tiger };它可以正常工作。

我在这里想念什么?

编辑: 我使用 browserify 作为模块捆绑器。

0 投票
2 回答
713 浏览

module - 简单的 Babel 转译 es6 模块加载

我正在为babel 转译的导入/导出 es6 模块寻找简单的模块加载。

  • 从带有导入/导出模块的 es6 源文件开始,以便在浏览器中使用
  • 使用 babel 将其静态转换为 es5,并通过配置指定最容易加载的模块转换(amd、commonjs、systemjs)。
  • 不要将 npm 用于模块,也不要使用任何其他复杂的工作流程。只是 babel 转译的文件。
  • 使用模块加载这些 es5 文件,并使用 a<script>加载 babel 转译用于加载 es6 模块的库。

我想避免使用 browserify、webpack、jspm 等。只需简单地转译 es6->es5 并使用库 babel 编译模块即可。我不需要捆绑。我们在这里谈论的是简单、基本的 javascript。

这可能吗?如果是这样,怎么办?!

我见过的所有模块加载讨论都使用了在我看来是不必要的复杂工作流程。我想在一组文件中简单地使用 es6 导入/导出,并在浏览器中尽可能简单地使用它们。

0 投票
1 回答
121 浏览

javascript - 无法导入捆绑文件

我在我的应用程序中这样做

这是bootstrap.js

我通过jspm bundle lib/bootstrap.js outfile.js.

当我尝试System.import('outfile.js')解决的 Promisem只是一个空对象。我在这里做错了什么?

0 投票
1 回答
305 浏览

javascript - SystemJS - ES6 模块加载器 - 导入中的层次结构过多

我刚开始使用 SystemJS 和 ES6 模块加载器。我有一个简单的测试模块:

然后导入

然后引发错误

但是,如果我像这样调用 init 它会起作用

我不确定父对象来自哪里,或者是否有办法绕过它。我错过了什么?

0 投票
2 回答
785 浏览

babeljs - (如何)我可以在 babel 中使用 System.import 和 require.js 吗?

我正在玩一些新的ES6功能和 Babel。我通过require.js(转换为AMD)成功地使用了模块导出/导入功能,但实验性模块加载器不想工作。这是我的代码和配置:

提取物front-app/tst.js

我的.babelrc样子是这样的:

我导入的脚本是这些,按顺序:

不幸的是,我使用 firefox 得到以下错误:

那是什么a?我错过了什么吗?请记住,我的代码已转译为 AMD,但System应该保留在转译代码中(并且它就在那里)。polyfill 应该完成这项肮脏的工作,对吧?

0 投票
1 回答
452 浏览

javascript - JSPM - 有没有办法或需要对捆绑的文件进行版本控制?

我正在使用 JSPM 和 SystemJS 来加载和捆绑前端代码。我想知道是否需要对捆绑文件进行版本控制,如果是的话,如何做到这一点,因为我找不到任何关于版本控制包的信息。

0 投票
1 回答
550 浏览

javascript - ES6 模块的“导入”正式兼容 CommonJS 和 AMD?

来自这篇文章: https ://hacks.mozilla.org/2015/08/es6-in-depth-modules/

上面写着

新标准旨在与现有的 CommonJS 和 AMD 模块进行互操作。

更准确地说

所有 CommonJS 和 AMD 模块在 ES6 中呈现为具有默认导出

如果真的是这样,我们只需要一个 ES6 polyfill,我们就不必使用其他任何东西了。

然而对于例如这个 ES6 Polyfill :https ://github.com/ModuleLoader/es6-module-loader似乎不允许从 ES6 加载 CommonJS/AMD 模块,但只有像 SystemJS 这样构建在它之上的解决方案才允许它。

所以问题是:官方 ES6 标准说应该支持 CommonJS/AMD(通过呈现为具有默认导出)是真的吗?

如果是这种情况,您是否参考了这样说的 ESCMA 规范?那么为什么它不是 polyfill 本身的一个特性,而不是建立在它之上的解决方案呢?

0 投票
5 回答
18319 浏览

javascript - Node.js + TypeScript:类型脚本编译代码的语法不明确

我正在尝试在我的节点项目中使用 TypeScript,但我遇到了一些问题。

这是我的index.ts文件:

我在跑:

我的输出是index.js

["default"]是从哪里来的?它使我的代码无法正常运行:

据我了解,我应该得到没有“默认”括号的代码,它会工作得很好 - 我尝试删除括号并且它工作。

我在这里想念什么?