【前端】ES6：模块化

文章目录

• 1 Module语法
• • 1.1 写法1：export default
  • 1.2 写法2：export
  • 1.3 写法3：export 方法
  • 1.4 混合写法
• 2 NodeJS中的模块化
• • 2.1 写法1：NodeJS写法
  • 2.2 写法2：ES6写法
  • 2.3 写法3：修改文件后缀名

JavaScript有两种模块：一种是ES6模块，简称ESM，另一种是CommonJS模块，简称CJS。

CommonJS模块是Node.js专用的，与ES6模块不兼容。语法上面，两者最明显的差异是，CommonJS模块使用require()和module.exports，ES6模块使用import和export。

ES6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。

1 Module语法

1.1 写法1：export default

export default A1

import a1 from "./1.js" //a1：名字随便起

1.2 写法2：export

export {A1,A2}

import {A1,A2} from "./1.js" // A1，A2必须与模块中名字一致

import {A1 as a1, A2 as a2} from "./1.js" // as：取别名

import * as obj from "./1.js"

1.3 写法3：export 方法

export function A1(){
    console.log("A1")
}
export function A2(){
    console.log("A2")
}

import {A1,A2} from "./1.js"

import {A1 as a1, A2 as a2} from "./1.js"

import * as obj from "./1.js"

1.4 混合写法

export {A1}
export default A2

import A2, {A1} from "./1.js"

2 NodeJS中的模块化

2.1 写法1：NodeJS写法

module.exports = {
	A1,
	A2
}

const obj1 = require("./1.js")

2.2 写法2：ES6写法

新建package.json文件，添加：“type”：“module”，说明NodeJS承认ES6这种模块化形式，然后就可以使用ES6模块化的写法。

export default  {
    A1,
    A2
}

import obj from './1.js'

2.3 写法3：修改文件后缀名

修改文件后缀名为.mjs即可，不需要package.json文件也可以使用ES6模块化的写法。

export default  {
    A1,
    A2
}

import obj from './1.mjs'