rollup more - ES Module Syntax ES6导入导出方法

ES6 - ECMAScript 2015 的导入导出的一些方法。

Named Imports

具名的导入导出

这里是针对单个变量，或者函数的导入导出。

1
2
3
4
5
6
7
8

export const numA = 2;

export function sum(){  

}

import {numA,sum} from "./foo.ts";

Namespace Imports

命名空间导入导出

首先我们有一个foo.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
  
export const numA = 2;  
  
export function sum(){  
  
}  
  
const abc = 5;  
  
export default 'hello world!';

There have three exports , two named exports, one default export.

Now , let’s show the fooModule.

使用命名空间导入。

1
2
3
4
5
6
7
8
9
import * as fooModule from './foo.ts';

console.log(fooModule)
[Module: null prototype] {
  __esModule: true,
  default: 'hello world!',
  numA: 2,
  sum: [Function: sum]
}

只能看到被exports的内容。

Default Import

1
2
// foo.ts
export default 'hello world!';

1
2
import foo from './foo.ts';  
console.log(foo) // hello world!

只能拿到default 关键字导出的内容。

Dynamic Import

需在rollup config内开启一个配置

nodejs 的commonjs 是不支持动态import导入的去package.json开启type = module

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
// main.ts
// 还是加载之前的foo.ts

async function loadFoo(){  
    try{  
        const fooModule = await import('./foo.ts')  
        console.log(fooModule)  
    }catch (e) {  
        console.error("import module error ")  
    }}  
loadFoo().then()  
export default function Abc() {  
}

1
2
3
4
5
6
打印出来的模块
[Module: null prototype] {
  default: 'hello world!',
  numA: 2,
  sum: [Function: sum]
}