JavaScript ES6 模块化

本文主要是介绍JavaScript ES6 模块化，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、ES6中模块化规范：

每个js文件都是一个独立的文件

导入其他模块成员使用import关键字

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

2、nodejs中使用ES6模块化规范：

nodejs默认只支持CommonJS规范，要在nodejs中使用ES6的模块化规范，需要满足两个条件：

(1)nodejs版本大于等于 v14.15.1

使用命令

node --version

(2)在package.json文件中添加[type:module]的设置

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "jquery": "^3.6.0",
    "then-fs": "^2.0.0"
  }
}

3、ES6模块化基本语法：

(1)默认导出与默认导入

导出模块代码：

let n1 = '张三'
let n2 =  18

function show(){
    console.log('hello');
}

export default 
{
    n1,
    show
}

导入模块代码：

import mod1 from './mod.js'

console.log(mod1.n1)
mod1.show()

运行结果为：

张三
hello

注意事项：

每个模块中，只能使用唯一的一次export default

默认导入时，接受的名称可以使用任意名称，但需要是合法的名称，例如不能以数字开头。

(2)按需到出与按需导入

导出模块代码：

//按需导出
export let s1 = 's1'
export let s2 = 's2'
export function say(){
    console.log('hello')
}

//默认导出
export default {
    s3:'s3'
}

导入模块代码：

import msg,{s1,s2,say} from './mod2.js'

//使用按需导入
console.log(s1)
console.log(s2)
say()

//使用默认导入
console.log(msg.s3)

运行结果：

s1
s2
hello
s3

注意事项：

每个模块中可以使用多次按需到出

按需导入的成员名称必须和按需导出的名称保持一致

按需导入时，可以使用as关键字进行重命名

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

(3)直接导入并执行

导出模块代码：

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

导入模块代码：

import './mod3.js'

运行结果

0
1
2

这篇关于JavaScript ES6 模块化的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！