本文介绍了ES6的模块化特性，包括浏览器不支持ES6模块化的问题，如何搭建支持ES6模块化的环境，以及`import`和`export`的使用。详细讲解了`export`导出多个、给导出项起别名、整体导入，以及`export default`的基本用法、限制和与`export`同时使用的情况。文章旨在帮助读者掌握ES6的模块化概念和实践。
1.引入
历史上，javascript作为一门解释型的弱类型语言一直不被人看重。其中有很一个很重要的因素是它没有模块体系。
模块体系说起来很高大上，其实就是一句话：它不支持在一个.js中引入另一个.js文件。
例如：
有两个文件：a.js，b.js
// a.js
function f1() {
}
b.js
// 如何去使用a.js中定义的f1?
这个问题在其它很多编程语言中都不是问题，例如java,php,c,c++,python… 。
在es6出来之前，解决这个问题很痛苦，有如下两种曲线救国的方法：
- 在.html中先引入a.js，再引入b.js。这样就可以直接在b.js中使用f1了。
- 第三方的模块工具：sea.js，require.js。
这两种方式可以达到目标，但没有能从根上解决javascript不支持模块的苦楚（甚至css都有自已的@import可以导入另外的css）。
es2015登场，带着自已强大的语法能力回来了，它的目标是成为一门企业级的开发语言，它带着基因中的模块化回来了。
下面我们来学习es6中的模块化吧。
- 如何搭建一个支持es6模块化的环境
- 学习import ,export
2. 如何搭建一个支持es6模块化的环境
如何搭建一个支持es6模块化的环境?我们不是一直就在浏览器中js代码吗？难道浏览器中不支持es6的模块化吗？
答案是：不支持！
2.1浏览器不支持es6模块化
- index.html 在这里引入 index.js
- tool.js 定义updateDom()
- index.js 引入tool.js并使用updateDom()方法
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<title>es6模块化</title>
</head>
<body>
<div id="app">
</div>
<scriptsrc="./index.js"></script>
</body>
</html>
tool.js
function updateDom(id,content) {
document.getElementById(id).innerHTML = content
}
export default updateDom
index.js
import tool from "./tool.js"
tool("app",'es6模块化')
此时，打开浏览器去访问index.html，肯定会报一个错误说"import 不认识" 。
下面来说说如何去搭建一个支持es6模块化的环境：
- 方法一：用webpack之类的打包工具来打包es6成es5，这样你可以先写es6再转成es5。
- 方法二：用前端框架中的脚手架工具创建一个项目，例如vue-cli去创建一个vue项目，也是可以支持的。
- 方法三：给chrome设置一个开关，并小改一下代码。
2.2 让chrome浏览器支持es6模块化
需要两个步骤，就可以在chrome浏览器感受es6的模块化了，来，坐稳：
- 启用es6的特性.
打开chrome浏览器，在地址栏中输入 chrome://flags; 找到experimental javascript，启用它；最后重启chrome浏览器。（注，我的版本是：chrome74.0.3729.131）
- 修改index.html中引入.js 的方式
最低0.47元/天 解锁文章
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
