Question

我正在使用Angular2 RC4：

    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.2",
    "@angular/upgrade": "2.0.0-rc.4",

我正在使用JetBrains IntelliJ IDEA 2016.2。当我引用Angular2指令时，IDE有助于导入定义指令的包。遗憾的是，IDE正在查找指令的多个定义，这意味着我必须从提供的列表中选择正确的指令。偶尔我会选择＆＃34;错误＆＃34;一，我最终会遇到大量的编译错误。在我开始学习的时候，错误的包总是/通常是包含esm子文件夹的Angular2分发目录中的包。

检查任何esm文件夹后，它的内容与模仿src文件夹（例如）的内容非常相似：

@angular
  common
  + esm
    + src
      + directives
      + facade
      + form-deprecated
      + location
      + pipes
        common_directives.d.ts
        common_directives.js
        common_directives.js.map
        common_directives.metadata.json
        directives.d.ts
        ...
        pipes.js
        pipes.js.map
  + src
    + directives
    + facade
    + form-deprecated
    + location
    + pipes
      common_directives.d.ts
      common_directives.js
      common_directives.js.map
      common_directives.metadata.json
      directives.d.ts
      ...
      pipes.js
      pipes.js.map

问题1： esm目录的目的是什么？为什么在分发中提供这些目录？

问题2：作为Angular2应用程序开发人员，我是否需要这些目录中的文件？

问题3：如果＆＃34;否＆＃34;问题2我可以安全地从我的项目中删除这些和/或有没有办法使IntelliJ IDEA 2016.2忽略这些文件夹？

Answer 1

问题1 ：esm文件夹包含以纯 ES2015 （或 ES6 ）模块语法编写的库。在JavaScript-land中有两个主要社区创建的模块风格， AMD 和 CommonJS ，但ES2015模块是模块语法第一次实际上是语言的一部分。用ES6模块编写的代码是面向未来的：语法更好，支持循环依赖，模块导出绑定而不是值。 ES2015模块比其他格式更有效，并且可以通过树摇动技术促进更小的束大小的创建，即只导入您需要的位而不是导入整件事情。社区已经创建了利用ES2015模块的工具。例如，rollup.js库是一个JavaScript模块捆绑器，它使用树摇动技术生成较小的包。

那么，为什么Angular团队已经包含了esm发行版？好吧，虽然现在浏览器不完全支持ES2015语法，但您可以使用rollup.js等工具充分利用ES2015模块语法来生成应用程序的超精益捆绑包。

问题2 ：就像我之前说过的那样，您可以（或必须）使用esm目录来使用rollup.js库生成较小的应用程序包。

问题3 ：您不需要删除任何内容。当您必须为生产生成应用程序包时，esm目录是您最好的朋友。

所有这一切的优秀参考是rollup.js wiki page。看一看。

您还可以阅读优秀文章Building and Angular 2 Application for Production，其中介绍了如何使用rollup.js和树木摇晃。

** 奖金 **：检查库的package.json，您可以看到它是否包含ES2015版本。只需查看jsnext:main属性即可。有关它的更多详细信息，请阅读rollup - jsnext:main文档。

Angular 2模块中esm目录的用途是什么？

1 个答案: