Angular 2模块中的esm目录的用途是什么? [英] What is the purpose of the esm directories in the Angular 2 modules?

问题描述

我正在使用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会找到指令的多个定义，这意味着我必须从提供的列表中选择正确的指令.有时，我会选择错误的"选项，最终会导致大量的编译错误.据我了解，错误的软件包通常/通常是Angular2分发目录中包含esm子文件夹的软件包.

在检查任何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:如果问题2的否"可以安全地从项目中删除，并且/或者有没有办法使IntelliJ IDEA 2016.2忽略这些文件夹?

解决方案

问题1 :esm文件夹包含以纯 ES2015 (或 ES6 )模块语法.在JavaScript领域中，有两种主要的社区创建的模块风格，分别是 AMD 和 CommonJS ，但是ES2015模块是模块语法首次真正成为该语言的一部分.用ES6模块编写的代码是面向未来的:语法更好，支持循环依赖性，并且模块导出绑定而不是值. ES2015模块比其他格式更有效，并且可以通过摇树技术来促进创建较小的包大小，即仅导入所需的位，而不导入整件事.社区已经创建了利用ES2015模块的工具.例如， rollup.js 库是一个JavaScript模块捆绑程序，它使用树状摇动技术来生成较小的捆绑程序./p>

那么，为什么Angular团队包含了esm发行版?好吧，尽管如今的浏览器并不完全支持ES2015语法，但是您可以使用rollup.js之类的工具来充分利用ES2015模块语法来生成应用程序的超精简包.

问题2 :就像我之前说的，您可以(或必须)使用esm目录使用例如rollup.js库生成较小的应用程序包.

问题3 :您无需删除任何内容. esm目录是您最好打包应用程序以进行生产时的最佳朋友.

rollup.js Wiki页面是所有内容的绝佳参考.看看.

您还可以阅读出色的文章汇总-jsnext:main 文档./p>

I am working with 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",

and I am using JetBrains IntelliJ IDEA 2016.2. When I reference Angular2 directives the IDE helpfully offers to import the package in which the directive is defined. Unfortunately the IDE is finding multiple definitions of the directives which means that I have to choose the correct one from a list that is provided. Occasionally I will choose the "wrong" one and I'll end up with a large number of compilation errors. As I've come to learn, the wrong package is always/normally the one in an Angular2 distribution directory containing an esm subfolder.

Upon inspection of any esm folder it's contents closely mimic those of the sibling src folder (for instance):

@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

Question 1: What is the purpose of the esm directories and why are these provided in the distribution?

Question 2: As an Angular2 application developer do I have need of the files in these directories?

Question 3: If "No" to question 2 can I safely remove these from my project and/or is there a way to make IntelliJ IDEA 2016.2 ignore these folders?

解决方案

Question 1: The esm folder contains the library written in pure ES2015 (or ES6) module syntax. There are two main community created flavours of module in JavaScript-land, AMD and CommonJS, but ES2015 module is the first time a module syntax is actually part of the language. Code written in ES6 modules is future-proof: the syntax is nicer, cyclic dependencies are supported and modules export bindings rather than values. ES2015 module is more efficient than the other formats and can facilitate the creation of smaller bundle size through tree-shaking technique, i.e., importing just the bits you need instead of importing the whole thing. The community has already created tools that take advantage of the ES2015 module. As an example, the rollup.js library is a JavaScript module bundler that uses tree-shaking technique to generate smaller bundles.

So, why the Angular team has included the esm distribution? Well, although nowadays the browsers don't fully support ES2015 syntax, you can use tools like rollup.js to take full advantage of the ES2015 module syntax to produce a super lean bundle of your application.

Question 2: Like I said before, you can (or must) use the esm directory to generate a smaller bundle of your application using rollup.js library for example.

Question 3: You don't need to remove anything. esm directory is your best friend when you have to generate a bundle of your application for production.

An excellent reference for all of it is the rollup.js wiki page. Take a look.

You can also read the excellent article Building and Angular 2 Application for Production that shows how to use rollup.js and tree-shaking.

** Bonus **: Inspecting a package.json of a library you can see if it has included a ES2015 version. Just look for the jsnext:main property. For more details about it you can read the rollup - jsnext:main documentation.

这篇关于Angular 2模块中的esm目录的用途是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！