ES6

ES6 - 模块化

Posted on 03-16 2020,4 min read

ES6模块化


Organized by安南 City

Completion time2020-03-16

Send error to emailcity@nanzc.com


ES6模块化规范诞生之前,Javascript 社区已经尝试并提出了AMDCMDCommonJS 等模块化规范。

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

,例如:

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

因此,ES6语法规范中,在语言层面上定义了ES6模块化规范,是浏览器端与服务器端通用的模块化开发规范。

定义

  • 每个 js 文件都是一个独立的模块
  • 导入模块成员使用import关键字
  • 暴露模块成员使用export关键字

在Node.js中使用babel体验ES6模块化


由于Node.js并不支持ES6模块化相关操作,我们需要通过babel进行语法转换。

  • 安装相关开发环境

    npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
    
  • 安装项目相关依赖

    npm install --save @babel/polyfill
    
  • 在项目根目录创建文件:babel.config.js

    const presets = [
        ["@babel/env", {
            targets: {
                edge: "17",
                firefox: "60",
                chrome: "67",
                safari: "11.1"
            }
        }]
    ]
    module.exports = { presets }
    
  • 运行文件

    npx babel-node 文件名
    

 

默认导入导出


默认导出只能使用一次

export default { value }

// m1.js
let defaultA = "defaultA"
let defaultB = function(){
    console.log("defaultB")
}

export default {
    defaultA,
    defaultB
}

// m2.js
import defaultAll from './m1'

 

按需导入导出


按需导出可以使用多次

export value

// m1.js
export let needA = "needA"

export let needB = "needB"

export let needC = function(){
    console.log("needC")
}

// m2.js
import { needA, needC } form "./m1"

 

默认和按需结合使用时


在我们同时使用默认导出和按需导出时,导入时使用逗号分割即可。

// m1.js
let defaultA = "defaultA"
let defaultB = function(){
    console.log("defaultB")
}
// 默认导出
export default {
    defaultA,
    defaultB
}

// 按需导出
export let needA = "needA"
export let needB = "needB"
export let needC = function(){
    console.log("needC")
}

// m2.js
import defaultAll, { needA, needC } from './m1'

 

导入重命名


在导入模块时,会遇见模块变量重名的情况,那么怎么解决它呢?

这个时候可以用到我们的as关键字

// m1.js
export let needA = "needA"

export let needB = "needB"

export let needC = function(){
    console.log("needC")
}

// m2.js
import { needA as needRename, needC } form "./m1"
// 例如此时模块内已存在needA变量,所以可以使用as重命名导入变量名为needRename。
let needA = "已存在变量needA"

 

导入一个空模块时


我们无需担心导入一个未暴露任何变量的模块时会出错。

因为当导入一个空模块时,系统默认返回一个空对象{}

 

直接导入并执行模块代码


在我们只想执行模块内的代码,却不想导入模块内的变量时

// m1.js
for (let i = 0; i < 3; i++) {
    console.log(i);
}

// m2.js
import './m2'
// 导入的模块内部代码会自动执行

 

 

下一篇: Node操作原生mongodb模块