ES6模块化(ES module)

  • Post author:
  • Post category:其他




一、ES6模块化(ES module)



1.模块化的分类

在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了

AMD



CMD



CommonJS

等模块化规范。

但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准。

例如:

  • AMD 和 CMD 适用于浏览器端的 Javascript 模块化
  • CommonJS 适用于服务器端的 Javascript 模块化

    • 导出:

      module.exports = 导出的内容
    • 导入:

      require('模块')

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,官方的ES6 模块化规范诞生了!



2.为什么要学习ES6 模块化规范

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本,开发者不需再额外学习

AMD



CMD



CommonJS

等模块化规范。

ES6 模块化规范中定义:

  • 每个 js 文件都是一个独立的模块
  • 导入其它模块成员使用

    import

    关键字
  • 向外共享模块成员使用

    export

    关键字



3.在nodejs中使用ES6模块化

node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照如下两个步骤进行配置:

  1. 确保安装了

    v13.0.0 或更高版本的 node.js


  2. package.json

    的根节点中添加

    "type": "module"

    节点


    • type

      ,默认是commonjs,表示项目代码 只能 使用 CommonJS 语法(只能使用 module.exports 导出,使用require导入)

    • type

      配置为 “module” 之后,表示项目代码 只能 使用 ES6模块化语法



二、ES6模块语法



1.ES6模块语法3 种用法:

  • 默认导出与默认导入
  • 按需导出与按需导入
  • 直接导入并执行模块中的代码


1.1默认导出与默认导入

默认导出的语法:

export default 默认导出的成员


默认导入的语法:

import 接收名称 from '模块路径'

  • 导出
const a = 10
const b = 20
const fn  = () => {
  console.log('这是一个函数')
}
// 默认导出
// export default a  // 导出一个值
export default {
  a,
  b,
  fn
}
  • 导入
// 默认导入时的接收名称可以任意名称,只要是合法的成员名称即可
import result from './xxx.js'
console.log(result)

注意点:

  • 每个模块中,只允许使用

    唯一的一次 export default
  • 默认导入时的接收名称可以

    任意名称

    ,只要是合法的成员名称即可


1.2按需导入与按需导出

按需导出的语法:


export const s1 = 10



按需导入的语法:


import { 按需导入的名称 } from '模块标识符'

按需导出的语法:

export const a = 10
export const b = 20
export const fn = () => {
  console.log('内容')
}

按需导入的语法:

import { a, b as c, fn } from './xxx.js'

注意事项:

  • 每个模块中可以有多次按需导出
  • 按需导入的成员名称必须和按需导出的名称保持一致
  • 按需导入时,可以使用

    as

    关键字进行

    重命名

  • 按需导入可以和默认导入一起使用

将所有内容全部导入:

import * as obj from './03-按需导出.js'
console.log(obj)
/**
 * {
 *   uname: 'zhangsan',
 *   age: 20,
 *   fn: function ......,
 *   default: 'hello world'  // 叫做default这个,是默认导出的内容
 * }
 */


1.3直接导入模块(无导出):

如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。

可以直接导入并执行模块代码,示例代码如下:

import '模块的路径'

//xxx.js
for (let i = 0; i < 10; i++) {
  console.log(i)
}
// 导入该模块
import './xxx.js'

导入内置模块和第三方模块:

// 内置模块,支持默认导入
import fs from 'fs'

// 内置模块,支持按需导入
import { readFile, writeFile } from 'fs'

// 第三方模块,肯定支持默认导入(按需导入不一定支持,因为我们并不知道别人的模块是怎么写的)
import dayjs from 'dayjs'



版权声明:本文为m0_62181310原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。