JavaScript 中的模块——CommonJS 和 ESmodules（中）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

ES模块

现在让我们回顾一下 ESmodules。ESmodules 是 ES6 (2015) 引入的标准。这个想法是标准化 JS 模块的工作方式并在浏览器中实现这些功能（以前不支持模块）。

ESmodules 是一种更现代的方法，目前由 Node.js 的浏览器和服务器端应用程序支持。

让我们在代码中看到这一点。我们再次开始使用npm init -y.

现在我们去我们的package.json并添加"type": "module"到它，像这样：

{
  "name": "modulestestapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

如果我们不这样做并尝试在 Node 上实现 ESmodules，我们将收到如下错误：

(node:29568) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
...
SyntaxError: Cannot use import statement outside a module

现在让我们重复完全相同的例子。在我们的main.js文件中，我们将有以下代码：

// main.js
import { mod1Function } from './mod1.js'

const testFunction = () => {
    console.log('Im the main function')
    mod1Function()
}

testFunction()

mod1.js我们将拥有这个：

// mod1.js
const mod1Function = () => console.log('Mod1 is alive!')
export { mod1Function }

请注意，require我们使用的是import而不是module.exports使用export. 语法有点不同，但行为非常相似。

同样，如果我们想从同一个文件中导出多个内容，我们可以这样做：

// main.js
import { mod1Function, mod1Function2 } from './mod1.js'

const testFunction = () => {
    console.log('Im the main function')
    mod1Function()
    mod1Function2()
}

testFunction()

// mod1.js
const mod1Function = () => console.log('Mod1 is alive!')
const mod1Function2 = () => console.log('Mod1 is rolling, baby!')

export { mod1Function, mod1Function2 }

ESmodules 中的另一个可用功能是导入重命名，可以这样完成：

// main.js
import { mod1Function as funct1, mod1Function2 as funct2 } from './mod1.js'

const testFunction = () => {
    console.log('Im the main function')
    funct1()
    funct2()
}

testFunction()

请注意，我们在每个函数之后使用as关键字，然后根据需要重命名它。稍后在我们的代码中，我们可以使用新名称而不是导入的原始名称。;)

您可以做的另一件事是将所有导出文件一起导入并将它们放在一个对象中，如下所示：

// main.js
import * as mod1 from './mod1.js' 

const testFunction = () => {
    console.log('Im the main function')
    mod1.mod1Function()
    mod1.mod1Function2()
}

testFunction()

当我们希望在整个代码中明确每个导入的来源时，这可能很有用。看到函数现在被称为mod1.mod1Function().

最后值得一提的是default关键字。有了它，我们可以为给定模块设置默认导出。像这样：

// mod1.js
const mod1Function = () => console.log('Mod1 is alive!')
const mod1Function2 = () => console.log('Mod1 is rolling, baby!')

export default mod1Function
export { mod1Function2 }

拥有默认导出意味着什么？好吧，这意味着我们在导入它时不必对其进行解构。我们可以像这样使用它：

// main.js
import mod1Function, { mod1Function2 } from './mod1.js' 

const testFunction = () => {
    console.log('Im the main function')
    mod1Function()
    mod1Function2()
}

testFunction()

我们甚至可以在没有as关键字的情况下重命名导入，因为 JavaScript“知道”如果我们不解构，我们将引用默认导入。

// main.js
import lalala, { mod1Function2 } from './mod1.js' 

const testFunction = () => {
    console.log('Im the main function')
    lalala()
    mod1Function2()
}

testFunction()

这也几乎概括了 ESmodules。我希望直截了当。=)