viviier

ECMAScript6 import extends

关于import export

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。

假设我们有两个js文件:index.jscontent.js,现在我们想要在index.js中使用content.js返回的结果,我们要怎么做呢?

传统的CommonJS写法

1
2
3
4
5
// index.js
let animal = require('./content.js')
// content.js
module.exports = 'A cat'

ES6的写法

1
2
3
4
5
// index.js
import animal from './content'
// content.js
export default 'A cat'

ES6 module的高级用法

export命令除了输出变量,还可以输出函数,甚至是类

1
2
3
4
5
6
7
8
9
10
11
12
// index.js
import { say, type } from './content'
let says = say()
console.log(`this ${type} says $(says)`) // The dog says Hello
// content.js
export default 'A cat'
export function say(){
return 'Hello'
}
export const type = 'dog'

输入的时候要注意:大括号里的变量名,必须与被倒入模块对外接口的名称想通过。

如果还希望输入content.js中输出的默认值(default),可以写在大括号外面。

1
2
3
4
5
// index.js
import animal, { say, type } from './content'
let says = say()
console.log(`The ${type} says ${says} to ${animal}`) // The dog says Hello to A cat

修改变量名

在ES6中可以用as实现换名。

1
2
3
4
5
// index.js
import animal, { say, type as animalType } from './content'
let says = say()
console.log(`hello ${animalType} say ${says} to ${animal}`) // hello dog says Hello to A cat

模块的整体加载

使用星号( * )指定一个对象,所有输出的值都加载到这个对象上。

1
2
3
4
5
// index.js 这里的animal还是指代默认输出的接口
import animal, * as content from './content'
let says = content.say()
console.log(`hello ${content.type} says ${says} to ${animal}`) // hello dog says Hello to A cat

通常星号*结合as一起使用比较合适

Tree-shaking

打包时忽略没有使用到的变量,我们可以使用rollup.js

------本文结束感谢阅读------