JavaScript中的模块导入有一个缺点

更新日期: 2020-02-03阅读: 1.6k标签: 模块

在使用ES2015模块导入功能的时候你有什么觉得不爽的地方吗?反正我有!下面就来说说。


1.命名导入和自动完成

假设你编写了一个简单的JavaScript模块:

// stringUtils.js
export function equalsIgnoreCase(string1, string2) {
  return string1.toLowerCase() === string2.toLowerCase();
}

这是一个 stringUtils模块。该模块具有一个名为 equalsIgnoreCase 的导出,该函数比较两个忽略大小写的字符串。

到目前为止,一切看起来都不错。

现在,让我们尝试从 stringUtils 模块中导入 equalsIgnoreCase 函数到另一个JavaScript模块 app 中:

// app.js
import { equalsIgnoreCase } from './stringUtils';

equalsIgnoreCase('Hello', 'hello'); // => true

首先,你必须编写导入语句 import {},在此步骤中,IDE无法提供有关要导入的可用名称的任何建议。

然后你继续写 from './stringUtils',然后回到花括号,展开自动完成(autocomplete)以选择要导入的名称。

尽管ES2015模块有很多优点,但是 import 模块语法很难使用自动完成。


2. Python 中的模块

现在,让我们尝试在Python中导入命名组件。是否有同样的问题?

这是用Python实现的相同模块 stringUtils 和 equalsIgnoreCase函数:

# stringUtils.py
def equalsIgnoreCase(string1, string2):
  return string1.lower() == string2.lower()

在Python中,你无需明确指出要导出的函数。

现在,在另一个Python模块应用程序内部,让我们尝试从 stringUtils 导入 equalsIgnoreCase函数:

# app.py
from stringUtils import equalsIgnoreCase

equalsIgnoreCase('Hello', 'hello') # => true

在Python中,指出您要从中导入的模块: from stringUtils ,然后写导入什么…

如果你想知道可以导入的函数,编辑器已经知道了模块名并给出了必要的建议。方法更好!


3.解决方案

我能找到的在JavaScript中对命名导入启用自动完成的唯一解决方案是call ide以获得帮助。

例如,在Visual Studio Code中,你可以安装JavaScript(ES6)代码片段插件。

启用插件后,通过使用 imd 代码段并按 tab 键,光标首先跳到编写模块路径的位置。然后,在按下 tab 键后,光标会跳转回花括号内的导入位置。

启用插件后,通过使用 imd 代码段并按 tab 键,光标首先跳到编写模块路径的位置。然后,在按下 tab 键后,光标会跳转回花括号内的导入位置。它是这样工作的:

总结

在JavaScript中,导入语法强制您首先指定要导入的项(函数、类、变量),然后指定模块的路径。这种方法对自动完成是不友好的。

在Python中则相反,首先指定模块名称,然后指定要导入的组件,从 stringUtils 导入 equalsIgnoreCase,使用此语法可以轻松自动完成导入的项目。

使用ES6代码片段插件,您可以减轻在JavaScript中命名导入自动完成的问题。总比没有好。

您是否发现在ES模块中使用自动完成有困难?如果是,你知道什么解决方案?

原文:https://dmitripavlutin.com/ja...
翻译:杜尼卜

链接: https://www.fly63.com/article/detial/8496

ES6模块功能:export和import的加载方式

ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。

Node的https模块_创建HTTPS服务器

Node的https模块:HTTPS服务器使用HTTPS协议,需要证书授权,SSL安全加密后传输,使用443端口

如何让 node 运行 es6 模块文件,及其原理

最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制。而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目

module、export、require、import的使用

module每个文件就是一个模块。文件内定义的变量、函数等等都是在自己的作用域内,都是自身所私有的,对其它文件不可见。在module中有一个属性exports,即:module.exports。它是该模块对外的输出值,是一个对象。

Node.js - 模块系统

模块是Node.js 应用程序的基本组成部分,文件和模块是一一对应的。换言之,一个 Node.js 文件就是一个模块,这个文件可能是JavaScript 代码、JSON 或者编译过的C/C++ 扩展。Node.js 提供了 exports 和 require 两个对象

ES模块基础用法及常见使用问题

ES6中引入了模块(Modules)的概念,相信大家都已经挺熟悉的了,在日常的工作中应该也都有使用。本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

ES6 export 和 export default的区别

ES6中 export 和 export default 与 import使用的区别,使用 react native 代码详解,现在流行的前端框架,angular+ 主要使用 export 导出模块,react native 中使用 export default 导出模块,如今编辑器非常强大,安装插件会自动弹出模块名称,知道其导出怎么使用就可以了

export和export default的区别

export与export default均可用于导出常量、函数、文件、模块;你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用;

关于export和export default你不知道的事

网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。大家应该应该能理解import * from xxx会把文件中export default的内容都打包到文件中,而import {func} from xxx只会把文件中的func导入

最全的前端模块化方案

模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。将一个复杂的系统分解为多个模块以方便编码。会讲述以下内容:CommonJS、AMD 及 核心原理实现、CMD 及 核心原理实现

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!