然后使用如下方式导入：

import sayHello, { sayGoodbye } from './lib';
sayHello();  
// => Hello
sayGoodbye();  
// => Goodbye

导出一切你想导出的内容：

// lib.js
// 导出默认函数
export default function sayHello(){  
  console.log('Hello');
}
// 导出非默认函数
export function sayGoodbye(){  
  console.log('Goodbye');
}
// 导出简单值
export const apiUrl = '...';
// 导出对象
export const settings = {  
  debug: true
}

遗憾的是，不是所有的浏览器都支持了原生的模块语法。不过我们在代码中使用原生的模块语法，然后借助babel等转译工具将ES6模块语法转译成ES5所支持的AMD或CommonJS等模块语法。

模块加载器

模块加载器负责解析和加载以特定模块语法定义的模块。模块加载器在运行时执行：

• 首先在浏览器中加载模块加载器

• 告诉模块加载器应用的js入口文件

• 加载器去下载并解析js入口文件

• 加载器按需下载所有的js文件

打开浏览器的调试面板，你会看到加载器按需加载的js文件。

以下是两个常见的模块加载器：

• RequireJS：AMD模块加载器

• SystemJS：CommonJS、AMD、UMD以及System.register 模块加载器

模块打包器

打包器可以替换加载器。不过与加载器不同，打包器是在构建时运行：

• 使用打包器生成一个js文件（例如app.js）

• 在浏览器中加载该文件

如果你在浏览器的调试工具的网络面板中，只会看到浏览器只加载了一个文件。浏览器中不需要模块加载器。所有的代码都被打包在了一个js文件中。

在按需加载的场景下，打包器通常也会提供模块加载器。以按需请求对应的js文件。

列举几个常见打包器：

• webpack

• rollup

• browserify

总结

为了更好地理解现代JS开发环境中的各种工具，理解模块、模块格式、模块加载器和模块打包器之间的区别很重要。

模块是可复用的代码片段，它封装了实现细节，并对外暴露一个公开API，以便其他代码加载使用。

模块格式是用来定义模块的语法。很早之前就已经出现了各种模块格式，如AMD，CommonJS，UMD和System.register。从ES6开始原生提供了模块定义语法。

模块加载器在运行时解释并加载以特定模块格式编写的模块，常见的加载器有RequireJS和SystemJS。

模块打包器可以替代模块加载器。它在构建时生成一个 包含所有代码的JS包。常见的打包器有webpack、rollup和browserify。

好啦，读到这里相信你已经对现代JS开发的知识有了更好地理解了。