携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天 点击查看活动详情
前言
前两天总结了一下ES6中的两个我觉得非常常见的新特性，都是我想稍微深入了解的内容，今天来学习一下ES6中引入其他js文件的方法也就是模块化。
最近看到的例子
先看一下常见的例子，特别是在脚手架中：
import { MessageBox, Message } from 'element-ui'
export default service
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
我随便在我的之前做的一个vue-element-admin的项目中随便找了几行的代码。这就是 ES6模块化，它是 浏览器端 与 服务器端 通用的模块化开发规范。
定义与三种基本语法
其中有几个定义需要知晓：
- 每个 js 文件都是一个独立的模块
- 导入其它模块成员使用 import 关键字
- 向外共享模块成员使用 export 关键字
模块化有三种基本语法：
- 默认导出与默认导入
- 按需导出与按需导入
- 直接导入并执行模块中的代码
接下来举例三种基本语法
默认导出与导入
导出：
export default ...
注意：每个模块中，只允许使用唯一的一次
导入：
import ... from ...
按需导出与导出
导出：
export ...
可以在一个模块中使用多次，例如：
export const a = 1
export const b = 2
导入：
import { ... } from ...
就像最开始的例子中在Element UI中 导入自己想要的组件，这个可以说是最常见的了
注意： 按需导入的成员名称必须和按需导出的名称保持一致，按需可以使用 as 关键字进行重命名，按需导入可以和默认导入一起使用。
直接导入并执行模块中的代码
非常少见，一般在node.js服务端可以看到这样的写法
就是直接使用import 某个js文件：
import './a.js'
总结
模块化是我看到ES6新语法最新奇的例子，让我觉得JavaScript越来越像一个服务端，运行在操作系统上的语言了。今天回顾了三种基本语法，又加深了我对ES6新特性的映象，更加能够理解那些脚手架的目录结构语法逻辑了，没了解之间去学习React的时候很懵逼，哈哈。
