ES6 Module 模块化语法详解：导出、导入与特性

// file1.js
export const name = 'John';
export function greet() {
  console.log('Hello!');
}
export class Person {
  constructor(name) {
    this.name = name;
  }
}

// file2.js
import { name, greet, Person } from './file1';
console.log(name); // John
greet();           // Hello!
const person = new Person('Jane');

// file1.js
const person = {
  name: 'John',
  age: 30
};
export default person;

// file2.js
import person from './file1';
console.log(person.name); // John

// file1.js
const firstName = 'John';
export { firstName as name };

// file1.js
export const name = 'John';
// file2.js
export * from './file1'; // 导出 file1.js 中所有的导出

// file1.js
export const name = 'John';
export function greet() {
  console.log('Hello!');
}
// file2.js
import { name, greet } from './file1';
console.log(name);  // John
greet();            // Hello!

// file1.js
const person = { name: 'John' };
export default person;
// file2.js
import person from './file1';
console.log(person.name); // John

// file1.js
export const firstName = 'John';
// file2.js
import { firstName as name } from './file1';
console.log(name); // John

// file1.js
export const name = 'John';
export const age = 30;
// file2.js
import * as person from './file1';
console.log(person.name); // John
console.log(person.age);  // 30

// 动态导入
import('./file1').then(module => {
  console.log(module.name);
});

// file1.js
x = 10; // 报错，严格模式下不允许未声明的变量

// file1.js
let counter = 0;
export function increment() {
  counter++;
}
// file2.js
import { increment } from './file1';
increment();
console.log(counter); // 由于作用域隔离，counter 在 file2.js 中不可访问

// a.js
import { b } from './b.js';
export const a = 'a';
// b.js
import { a } from './a.js';
export const b = 'b';
console.log(a, b); // 输出: a b

// file1.js
export let name = 'John';
// file2.js
import { name } from './file1';
name = 'Jane'; // 错误：不能修改从模块导入的值

<script type="module">
  import { name } from './file1.js';
  console.log(name);
</script>

{
  "type": "module"
}

// file1.mjs
export const name = 'John';
// file2.mjs
import { name } from './file1.mjs';
console.log(name); // John