前端基础进阶（十五）：详解 ES6 Modules

对于新人朋友来讲，想要本身去搞定一个ES6开发环境并非一件容易的事情，由于构建工具的学习自己又是一个很是大的方向，咱们须要花费很多的时间才能掌握它。

好在慢慢的开始有大神提供了一些很是简单易懂，学习成本很是低的解决方案来帮助你们学习。create-react-app就是这些解决方案中，我的认为最简单易懂的一种方式。

因此在学习ES6 modules以前，先跟你们介绍一下create-react-app的安装与使用。

尽管 create-react-app的目的是用于开发react程序，可是咱们仅仅只用来学习ES6是再合适不过了。固然你也能够借助 vue-cli来学习，一样十分简单。

一、确保本身的本地环境已经安装了node与npm

一般安装的方式就是去node的官方网站下载安装，在安装node的时候，npm也会一块儿被安装。

下载地址： http://nodejs.cn/download/

二、安装一个好用的命令行工具

在windows环境下，系统默认的cmd很是难用，因此我我的比较推荐你们使用git.bash 或者 cmder。

git 下载地址： https://git-scm.com/downloads
在git安装目录下会有一个bash工具，找到安装目录直接使用便可。

cmder下载地址： http://cmder.net/

在mac上就方便不少了，你能够直接使用系统自带的terminal工具，就很是好用。可是通常我推荐你们使用iterm2，并安装oh my zsh插件。具体的配置你们能够本身去折腾，网上的教程应该足够帮助你搞定这一切了。

• iterm2 下载地址 http://www.iterm2.com/downloa...
• oh my zsh 主题选择 https://github.com/robbyrusse...

另外还强烈推荐一款超高颜值的终端工具 hyperTerm。

这款工具的特点就是颜值高，第一感受就是惊艳，你们不妨一试。

• hyperTerm 下载地址 https://hyper.is/

三、安装create-react-app

在命令行工具中使用查看版本的方式确保node与npm都安装好以后，咱们就能够安装create-react-app了。

> node -v
// 输出node版本号

> npm -v
// 输出npm版本号

使用npm全局安装create-react-app

> npm install create-react-app -g

而后咱们就可使用create-react-app来建立咱们的第一个项目。

找到一个你要存放项目的根目录，假设叫作develop，运行如下指令。

> create-react-app es6app

create-react-app会自动帮助咱们在develop目录下建立一个叫作es6app的文件夹，这就是咱们新建立的项目。

当项目建立完成以后，在命令行工具中，咱们会看到如图所示的提示。这些提示告诉了咱们如何运行项目npm start ，如何打包项目npm run build等，这里我就再也不赘述。

项目建立完毕以后，进入该文件夹。

> cd es6app

// 查看文件夹里的内容
> ls

咱们会发现里面有一个叫作package.json的文件，这个文件里包含了项目所须要的全部依赖。当咱们第一次运行项目以前，还须要安装该文件里的依赖包。

> npm install

安装完毕以后，咱们就能够启动该项目了。

> npm start

通常来讲，启动以后会自动在浏览器中打开。

create-react-app已经自动帮助咱们实现了热更新，所以当咱们修改代码时，浏览器会自动更新。固然，若是咱们仅仅只是修改页面样式时，热更新将会很是方便，可是若是你正在进行单页面的组件开发，可能热更新可以提供的帮助很是有限。

四、认识项目

只要咱们按照构建工具的规则进行开发，那么构建工具会自动帮助咱们将代码进行整合，所以在该项目中开发时，咱们并不须要本身来使用script或者link标签来引入js与css，因此认识create-react-app的规则就变得很重要。

初次建立的项目下，会有3个文件夹。

• node_modules

项目依赖包存放位置。当咱们运行npm install安装package.json中的依赖包时，该文件夹会自动建立，全部的依赖包会安装到该文件夹里。

• public

主要的做用是html入口文件的存放。固然咱们也能够存放其余公用的静态资源，如图片，css等。其中的index.html就是咱们项目的入口html文件

• src

组件的存放目录。在create-react-app建立的项目中，每个单独的文件均可以被当作一个单独的模块，单独的image，单独的css，单独js等，而全部的组件都存放于src目录中，其中index.js则是js的入口文件。虽然咱们并无在index.html中使用script标签引入他，可是他的做用就和此同样。

固然，若是咱们要进一步进行react的学习，那么确定须要了解多一点的规则，可是在学习react以前，咱们仍是先把ES6 modules的知识搞定在说吧，因此，接下来你要作的事情就是，删掉src目录里的除了index.js以外的全部文件，并清空index.js，咱们从0开始学习ES6 modules。

为了确保程序仍然可以正常运行，咱们在index.js中随便写点代码测试一下

const app = document.querySelector('#root')
app.innerHTML = '啊，所有被清空啦，准备工做终于作完了，能够开始学习ES6啦'

那么咱们就能够在这个环境下学习ES6的全部知识了，固然也包括ES6 modules。

ES6 modules

1. 引入模块

首先在src目录下建立一个test.js，在test.js中咱们随便干点什么简单的事情便可。

// src/test.js
console.log('your first module');

在index.js中经过import引入test.js，这是咱们要学会的第一个语法

// src/index.js
import test from './test'

console.log(test);

• import表示引入一个模块，
• test 咱们暂时理解为引入模块的名字，
• from表示从哪里引入
• ./test为./test.js的简写，表示将要引入模块的路径

引入这个动做执行时，test.js中的代码也执行了。因为在test.js中并无对外暴露任何接口，所以index.js中的test为一个空对象，那么对外暴露接口的方式，则是咱们要学习的第二个语法。

2. 对外提供接口

ES6 modules使用export关键字对外提供接口，在咱们刚才建立的test.js中，咱们添加以下代码

// test.js
const num = 20;
const arr = [1, 2, 3, 4];
const obj = {
    a: 0,
    b: function() {}
}
const foo = () => {
    const a = 0;
    const b = 20;
    return a + b;
}

export default {
    num,
    arr,
    obj,
    foo
}

在test.js中，咱们使用export default对包暴露了一个对象。他的意思就是当咱们使用import test from './test'时，这个test对象就默认等于export default暴露的对象。

咱们还能够在test.js中，仅仅经过export暴露几个方法与属性，咱们来看看index.js中test会变成什么样子。

// src/test.js
export const bar = () => {}
export const zcar = 12345;

保存运行后，咱们发现，index.js中的test对象并无变化，由于它仅仅等于export default抛出的对象，所以，为了得到模块test.js暴露的全部接口，咱们得经过以下的方式。

// src/index.js
import * as test from './test';

其中的 * 表示全部，这是比较经常使用的通配符，as表示别名，* as test的意思是将test.js暴露的全部接口组成的对象，命名为test。那么咱们在index.js中log出test，结果就以下。

若是你们还记得前面一篇文章里，我所讲的ES6解析结构的语法，那么对于以下的用法相信就不难理解。

// src/index.js
import test, { bar, zcar } from './test';

console.log(test);
console.log('bar:', bar);
console.log('zcar:', zcar);

test，仍然表示为export default暴露的对象，而 { bar, zcar }则表示利用解析结构的语法，从整个返回对象中去取得对应的接口。输出结果也就很清晰了。

这种方式仍是比较常见，好比咱们在使用react时，经常这样使用：

import React, { Component } from 'react'

它其实暗示了React的封装方式，也暗示了咱们应该如何去封装咱们的模块。

这里咱们可以直接引入 react的缘由，是由于咱们将它安装到了文件夹 node_modules中，该文件夹中安装的全部模块均可以这样直接引用。例如咱们安装一个jquery。

// 安装jquery
> npm install jquery

而后在其余模块中就能够直接引入

import $ from 'jquery'

这样，咱们能够和往常同样使用jquery。
经过这样方式，咱们还能够扩展更多的库，这就使得咱们这个开发环境不只仅可以用于react的开发，怎么用，彻底取决与你本身。

OK，ES6 模块的基础语法大概就这些吧，他告诉了咱们在ES6中，一个模块应该如何对外暴露接口与如何引入其余模块暴露的接口，这个知识点在实际开发中很是经常使用，所以虽然简单，可是不得不掌握，这也是你们进一步学习react或者vue的基础，主要的难点大概在于本地开发环境的折腾，若是你是初次折腾这些，可能会遇到一些小问题，因此必定要有一点耐心。

一般来讲，一个知识点，在彻底理解以前仍是有点难度的，可是理解以后就变得很是简单，因此若是你在学习这个知识点时感受有点困难，也不要过于担忧，多多动手尝试，并在实践中运用起来，相信很快就能掌握。

前端基础进阶系列目录