用于导入commonjs / amd模块的新es6语法,即`import foo = require('foo')` [英] New es6 syntax for importing commonjs / amd modules i.e. `import foo = require('foo')`

查看:521
本文介绍了用于导入commonjs / amd模块的新es6语法,即`import foo = require('foo')`的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以前我可以做:

  import foo = require('foo');但是现在,TypeScript(1.5)支持es6模块语法,实现相同的方法是什么?在ES6模块语法中。

解决方案

正确的方法是继续使用旧的导入语法。新的导入语法仅适用于ES模块,旧的导入语法用于ES6之前的模块。两者有区别,故意如此。 import * as foo from'foo'导入模块foo的所有属性,它不导入默认值为 foo



从设计师功能




  • 导出默认声明始终声明一个名为default的导出成员,并始终作为导出的赋值发布。默认。换句话说, export default 始终具有ES模块语义。为了与Babel兼容,我们可以选择在模块有默认导出时发出一个 __ esModule 标记,但是我们实际上并不会使用该标记。

  • 一个 export = 声明,它代替不同的实体代替模块本身,总是作为一个赋值发送到 module.exports 。在模块中使用 export = 的其他导出是错误的。这是现有的TypeScript行为。

  • 使用 export = 导出另一个模块(即内部或外部模块)的模块,可以使用新的ES6结构导入。特别地,方便的结构化导入可以与这些模块一起使用。使用 export = 导出另一个模块的模式在.d.ts文件中很常见,它提供了内部模块的CommonJS / AMD视图(例如,angular.d.ts)

  • 必须导入使用 export = 导出非模块实体代替模块本身的模块使用现有的 import x = require(foo)语法,如今的情况。






2016更新:在某些时候,TypeScript编译器开始允许 import *作为foo从' legacy-module-foo'可以在某些情况下获取旧模块的默认导入。 这违反了ES6规范§15.2.1.16值*表示导入请求是针对目标模块的命名空间对象)。



当以这种方式导入的旧模块更新为ES6模块时,这些模块的默认导入将停止工作(因为 * as foo 导入应该导入命名空间对象),如果您不知道这是一个TypeScript / SystemJS黑客攻击,这可能会令人非常混乱。还可能的是,将来的TypeScript对ES规范的重新排列将导致它们中断。



因此,您应该更喜欢继续使用传统的导入语法以上,以加载传统模块,以避免您自己和其他开发人员使用您的代码,了解ES6命名空间导入如何工作,并避免混淆突破性更改。


Previously I could do:

import foo = require('foo');

But now that TypeScript (1.5) supports es6 module syntax, what is the correct way to achieve the same in ES6 module syntax.

解决方案

The correct way is to continue using the old import syntax. The new import syntax is for ES modules only, the old import syntax is for pre-ES6 modules. The two are distinct, intentionally so. import * as foo from 'foo' imports all the properties of the module 'foo', it does not import the default value as foo.

From the designer of the feature:

  • An export default declaration always declares an exported member named default and is always emitted as an assignment to exports.default. In other words, export default consistently has ES module semantics. For compatibility with Babel we could optionally emit an __esModule marker when a module has a default export, but we wouldn't actually use that marker for anything.
  • An export = declaration, which substitutes a different entity to be exported in place of the module itself, is always emitted as an assignment to module.exports. It is an error to have other exports in a module that uses export =. This is the existing TypeScript behavior.
  • A module that uses export = to export another module (be that an internal or external module) can be imported using the new ES6 constructs. In particular, the convenient destructuring imports can be used with such modules. The pattern of using export = to export another module is common in .d.ts files that provide a CommonJS/AMD view of an internal module (e.g. angular.d.ts).
  • A module that uses export = to export a non-module entity in place of the module itself must be imported using the existing import x = require("foo") syntax as is the case today.

2016 update: The TypeScript compiler at some point started allowing import * as foo from 'legacy-module-foo' to get the default import of a legacy module in certain circumstances. This is a violation of the ES6 specification (§15.2.1.16, "The value "*" indicates that the import request is for the target module’s namespace object.").

When legacy modules you import in this manner are updated to ES6 modules, the "default" imports for those modules will stop working (because * as foo imports are supposed to be importing namespace objects), which may be extremely confusing if you don’t know that doing this is a TypeScript/SystemJS hack. It is also possible that a future TypeScript realignment to the ES specification will cause them to break.

As such, you should probably prefer to continue to use the legacy import syntax described above to load legacy modules to avoid confusing yourself and other developers working on your code about how ES6 namespace imports work, and to avoid confusing breaking changes.

这篇关于用于导入commonjs / amd模块的新es6语法,即`import foo = require('foo')`的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆