javascript - 在导入语句的上下文中，子路径是什么意思？

Question

假设我有一个这样的声明：

import * as bar from 'foo/bar';

我有几个问题：


/bar位是什么意思？
是否有一个专门的（适用于Google的）术语？
这是否可以提高效率（减少模块膨胀）？
如何在NPM上捆绑common-js模块（理想情况下与Rollup捆绑在一起）并支持此语法？

Answer 1

分解：

首先，为您的第一个和第二个问题提供上下文，让我们进一步介绍一下该语句的所有部分：


  import * as quux from 'foo/bar';


注意：示例中的第一个bar实例已被故意更改为quux以消除以下几点的歧义。


它统称为“导入声明”，或更具体地讲，称为“导入声明”。 ECMA-262 Imports Syntax Specification中定义的导入声明。
import部分称为导入关键字。
* as quux部分称为“名称空间导入”。


星号*表示bar中所有导出的绑定都将导入到一个新创建的名为quux的命名空间对象中。结果结果是quux对象将保存所有bar导出的成员。
其中的quux部分称为“导入的绑定”，如前所述，它用作新创建的名称空间对象的名称。

from 'foo/bar'部分称为“从子句”。


foo/bar部分是一个字符串文字，被称为模块说明符...它只是一个文件路径。





您的特定问题的答案：



  /bar位是什么意思？


它是模块说明符的一部分，而模块说明符是From子句的一部分。它只是对要从中导入导出成员的文件名的引用。在此示例中，其导出的成员将导入到名为quux的新名称空间对象中。

关于所谓的实际“部分”是什么； ECMA-262没有为其提供特定的参考/名称，但是，我将该部分称为文件名。 （即要导入的模块的文件路径中的文件名）。

据我所知，/bar可能需要也可能不需要包含文件扩展名（即/bar.js）。同样，ECMA-262导入语法中没有任何内容可以强制执行此操作。 ECMAScript仅定义模块的语法，而不定义用于加载模块的特定机制。因此，对于带有或不带有.js后缀的要求，可能因实现而异。例如：


在基于WebKit的Apple最新的Safari浏览器（可在iOS上运行）中，必须包含.js后缀。
在节点v8.10.0的Modules docs中，它们的示例中确实包含导入文件的.js文件扩展名。注意：由于ES6模块当前具有Stability Index 2，因此可能会更改。


  是否有特定的（适用于Google的）术语？


本身不是，因为ECMA并没有专门命名。您可以尝试使用Google前面提到的一些术语/术语。

  这是否可以提高效率（减少模块膨胀）？


我不确定我是否完全理解“模块膨胀”的含义。但是，如果您要说的话，这会导致应用程序代码中的模块减少吗？我认为不是，它更有可能导致增加模块的使用。

本地ES6模块支持将带来效率提升。本质上，本机支持可以提高速度/性能。 ES6模块的其他好处是：


ES6模块可以进行静态分析，从而可以通过名为Tree Shaking的进程消除死代码/未使用代码。更多信息here和here。因此，如果这就是“模块膨胀”一词的意思，那么是的；未使用/无效的代码将被执行“树状摇动”的工具删除。

警告;我不确定100％确定在NameSpace导入中使用通配符/星号（*）时执行树摇晃的工具是否能够删除无效代码。可能有必要导入您将要使用的特定成员，即

import { foo, bar, quux } from './foo/bar.js';

这是ECMAScript的官方标准。
您提供的示例包括一个NameSpace Import，因此还有另一个好处-这将有助于避免名称空间冲突。
here提到了更多好处。


  如何在NPM上捆绑common-js模块（理想情况下与Rollup捆绑在一起）并支持此语法？


Rollup使用一个名为 rollup-plugin-commonjs的插件，它将CommonJS模块转换为ES6，因此它们可以包含在Rollup捆绑包中。