@@ -1,291 +1,292 @@
## ES6模块化的基本语法
### ES6模块化的说明
**依赖模块需要编译打包处理。**原因如下：
- （ ） `Babel` 将 ES6 转化为 ES5。
- （ ） ， `require` 语法，而浏览器并不认识`require` 这个关键字。此时，可以用 `Browserify` 编译打包 js，
推荐学习链接：
- <http://es6.ruanyifeng.com/#docs/module >
### 基本语法：
**导出模块 ** ：
```
```
**引入模块 ** ：
```
```
## ES6模块化的使用举例（ ）
### 1、初始化项目
（ ） ：
``
` ``
（ ） ，
` `` json
{
: "es6-babel-browserify",
: "1.0.0"
}
` ``
：
（ ） ：
` `` bash
` ``
（ ） ：
` `
` ``
（ ） ：
` `` javascript
function foo1() {
.log( '我是 module1 中的 foo1');
}
function foo2() {
.log( '我是 module2 中的 foo2');
}
let arr = [1, 2, 3, 4, 5];
` ``
（ ） ：
` `` javascript
fn1() {
.log( '我是 module2 中的 fn1');
}
fn2() {
.log( '我是 module2 中的 fn2');
}
{ fn1, fn2 };
` ``
（ ） ：
` `` javascript
：
default () => {
.log( '我是 module3 中 default 方式暴露的函数');
};
` ``
， ，
， ，
（ ） ： （ ）
` `` javascript
：
default {
: '我是 module4 中 default 方式暴露的属性 name',
() {
.log( '我是 module4 中 default 方式暴露的函数 foo');
}
}
` ``
（ ） ，
？ ， ， ， ，
（ ） ：
` `` javascript
{ foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
{ fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意，括号里的对象名，要和 module1 中的对象名一致。
myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的，
myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的，
();
();
();
();
();
.log(myModule4.name); //module4中的属性
.foo(); //module4中的方法
` ``
- module1和module2是采用**常规暴露**的形式，在引入它们时，模块名要一致。而且，要求用**对象解构赋值**的形式，而不是用 `）
- module2和module3是采用**默认暴露**的形式，在引入它们时，模块名随便起。
（ ） ：
` `` html
< html lang="en">
<head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title> Document</ title>
</head>
<body>
< script src= "dist/main.js"></ script>
</body>
</html>
` ``
， ：
（ ） ：
` `
` ``
，
， ， ， ， `里的 `
（ ）
` `` bash
` ``
， ， ，
工程文件：
- [2018-04-13-ES6Demo.rar](https://download.csdn.net/download/smyhvae/10348940)
## ES6模块化的使用举例（ ）
下载 jQuery 包：
` ``
npm install jquery@1 //下载jQuery 1.X 的版本里最新的
` ``
在main.js 中引入上面的 jQuery：
` ``
import $ from 'jQuery';
` ``
然后我们就可以通过` $`这个符号去写jQuery的代码了。
## ES6模块化的基本语法
### ES6模块化的说明
**依赖模块需要编译打包处理。**原因如下：
- （ ） `Babel` 将 ES6 转化为 ES5。
- （ ） ， `require` 语法，而浏览器并不认识`require` 这个关键字。此时，可以用 `Browserify` 编译打包 js，
推荐学习链接：
- <http://es6.ruanyifeng.com/#docs/module >
### 基本语法：
**导出模块 ** ：
```
```
**引入模块 ** ：
```
```
## ES6模块化的使用举例（ ）
### 1、初始化项目
（ ） ：
| src
| module1.js
| module2.js
| module3.js
| main.js
index.html
```
（ ） ，
```
{
: ,
:
}
```
：
（ ） ：
```
npm install babel-preset-es2015 --save-dev
npm install browserify -g
```
安装 babel 的详细解释，可以参考本人的另外一篇文章：[
（ ） ：
在根目录下新建文件
`` `
"presets":[
"es2015"
],
"plugins":[]
}
```
（ ） ：
```
( ) {
. log ( ) ;
}
( ) {
. log ( ) ;
}
let arr = [ 1 , 2 , 3 , 4 , 5 ] ;
```
（ ） ：
```
fn1 ( ) {
. log ( ) ;
}
fn2 ( ) {
. log ( ) ;
}
{ fn1 , fn2 } ;
```
（ ） ：
```
：
( ) => {
. log ( ) ;
} ;
```
这里，我们采取了一种新的暴露方式（默认暴露），在暴露时，加上了， ，
注意，我们只能写一次 default， ，
（ ） ： （ ）
```
：
{
: ,
( ) {
. log ( ) ;
}
}
```
这里，我们依旧采取了默认暴露的方式，只能写一次 default。代码里暴露了一个对象（ ） ，
如果我想暴露多个属性、多个对象怎呢？ ， ， ， ，
（ ） ：
这个是主模块。现在，我们来看一下，它如何引入上面的四个模块。
```
{ foo1 , foo2 } ;
{ fn1 , fn2 } ;
; ，
; ，
( ) ;
( ) ;
( ) ;
( ) ;
( ) ;
. log ( myModule4 . name ) ;
. foo ( ) ;
```
我们可以看出：（具体请看注释，非常重要）
- ）
-
（ ） ：
在这里引入main.js即可。
```
< = "en" >
< head >
< = >
< = = >
< = = >
< > < / >
< / head >
< body >
< src = > < / >
< / body >
< / html >
```
如果我们不进行转换，而是直接在 index.html 中加载 js/src/main.js， ：
接下来，我们就进行转换。
（ ） ：
`` `
```
上方命令的意思是，将，
转化成ES5之后， ， ， ， 里的` require` 关键字：
于是，我们还要进行一次转换。
（ ）
```
```
dist/main.js就是我们需要引入到 index.html 里的文件。
以后， ， ，
运行效果：
工程文件：
- [2018-04-13-ES6Demo.rar ](https://download.csdn.net/download/smyhvae/10348940 )
## ES6模块化的使用举例（ ）
下载 jQuery 包：
```
```
在main.js 中引入上面的 jQuery：
```
```
然后我们就可以通过`$` 这个符号去写jQuery的代码了。
qianguyihao