一、模块化的基本语法

　　ES6的模块化的基本规则或特点：

　　　　1：每一个模块只加载一次，每一个JS只执行一次，如果下次再去加载同目录下同文件，直接从内存中读取。一个模块就是一个单例，或者说就是一个对象；

　　　　2：每一个模块内声明的变量都是局部变量，不会污染全局作用域；

　　　　3：模块内部的变量或者函数可以通过export导出；

　　　　4：一个模块可以导入别的模块

1、export 语法

如果一个js模块文件就只有一个功能，那么就可以使用export default导出

2、import语法

如果以export default导出，则对应的import直接接上文件名

如果导出的模块里面封装多个功能，则需要在import {...} 的大括号内部添加你需要导入的内容，哪怕只需要一个函数:import { fn1 } from './util2.js'

二、开发环境的配置——babel

es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。

1、电脑有node环境，运行npm init

创建项目描述文件 package.json。

如果某个文件夹被创建作为一个项目目录，那么它就应该包含一个 package.json 的文件。

package.json 文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等等数不清的好处。

2、npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

--save-dev 依赖包的名称在package.json的devDependencies中，devDependencies 里面的插件只用于开发环境，不用于生产环境

babel-core：babel转译器本身，提供了babel的转译API，如babel.transform等，用于对代码进行转译。

package.json、package-lock.json、dependencies、devdependencies

3、创建.babelrc文件

在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。

使用的时候需要安装对应的插件，对应babel-preset-xxx，例如下面的配置，需要npm install babel-preset-es2015。

在.babelrc配置文件中，主要是对预设(presets) 和插件(plugins) 进行配置：

{

"presets": ["es2015", "latest"],

"plugins": []

}

4、全局安装bable-cli：npm install --global babel-cli

5、查看是否安装成功：babel --version

6、创建 index.js

一段ES6语法的代码

内容为：[1,2, 3].map(item => item + 1);

7、运行babel index.js

三、开发环境的配置——webpack

1、npm install --save-dev webpack babel-loader

webpack-使用babel-loader转化ES6代码，即babel-loader是根据webpack标准写的转码器

2、配置webpack.config.js

3、配置 package.json 中的scripts

4、运行 npm start

5、检测打包结果

安装http-server：npm install http-server -g

启用静态服务：http-server -p 8881

浏览器访问：http：//localhost：8881

ES6 模块化如何使用，开发环境如何打包