mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-30 12:34:46 +08:00
293 lines
7.1 KiB
Markdown
293 lines
7.1 KiB
Markdown
|
||
|
||
## ES6模块化的基本语法
|
||
|
||
### ES6模块化的说明
|
||
|
||
|
||
**依赖模块需要编译打包处理**。原因如下:
|
||
|
||
- (1)有些浏览器不支持 ES6 的语法,写完 ES6 的代码后,需要通过`Babel`将 ES6 转化为 ES5。
|
||
|
||
- (2)生成了ES5之后,里面仍然有`require`语法,而浏览器并不认识`require`这个关键字。此时,可以用 `Browserify`编译打包 js,进行再次转换。
|
||
|
||
推荐学习链接:
|
||
|
||
- <http://es6.ruanyifeng.com/#docs/module>
|
||
|
||
|
||
### 基本语法:
|
||
|
||
|
||
**导出模块**:
|
||
|
||
```
|
||
export
|
||
```
|
||
|
||
|
||
**引入模块**:
|
||
|
||
```
|
||
import xxx from '路径'
|
||
```
|
||
|
||
|
||
## ES6模块化的使用举例(自定义模块)
|
||
|
||
### 1、初始化项目
|
||
|
||
(1)在工程文件中新建如下目录:
|
||
|
||
|
||
```
|
||
js
|
||
| src
|
||
| module1.js
|
||
| module2.js
|
||
| module3.js
|
||
| main.js
|
||
|
||
|
||
index.html
|
||
```
|
||
|
||
(2)在工程的根目录下,新建文件`package.json`,内容如下:
|
||
|
||
```json
|
||
{
|
||
"name": "es6-babel-browserify",
|
||
"version": "1.0.0"
|
||
}
|
||
```
|
||
|
||
### 2、环境配置:安装babel 和 browserify等
|
||
|
||
(1)安装babel 和 browserify:
|
||
|
||
```bash
|
||
npm install babel-cli -g
|
||
|
||
npm install babel-preset-es2015 --save-dev
|
||
|
||
npm install browserify -g
|
||
```
|
||
|
||
|
||
安装 babel 的详细解释,可以参考本人的另外一篇文章:[ES6的介绍和环境配置](https://github.com/smyhvae/Web/blob/master/10-ES6/03-ES6%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8C%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE.md)
|
||
|
||
(2)新建.babelrc:
|
||
|
||
在根目录下新建文件`.babelrc`,输入如下内容:
|
||
|
||
```
|
||
{
|
||
"presets":[
|
||
"es2015"
|
||
],
|
||
"plugins":[]
|
||
}
|
||
```
|
||
|
||
### 3、编写代码
|
||
|
||
|
||
(1)module1.js:
|
||
|
||
```javascript
|
||
//暴露模块:采用分别暴露的方式
|
||
|
||
export function foo1() {
|
||
console.log('我是 module1 中的 foo1');
|
||
}
|
||
|
||
export function foo2() {
|
||
console.log('我是 module2 中的 foo2');
|
||
}
|
||
|
||
export let arr = [1, 2, 3, 4, 5];
|
||
```
|
||
|
||
|
||
|
||
(2)module2.js:
|
||
|
||
```javascript
|
||
//暴露模块:采用统一暴露的方式
|
||
|
||
function fn1() {
|
||
console.log('我是 module2 中的 fn1');
|
||
}
|
||
|
||
function fn2() {
|
||
console.log('我是 module2 中的 fn2');
|
||
}
|
||
|
||
//统一暴露
|
||
export { fn1, fn2 };
|
||
```
|
||
|
||
|
||
(3)module3.js:
|
||
|
||
|
||
|
||
```javascript
|
||
//暴露模块:采用默认暴露的方式。
|
||
//默认暴露的方式可以暴露任意数据类型,暴露的是什么数据,接收到的就是什么数据
|
||
|
||
//语法格式:export default value;
|
||
export default () => {
|
||
console.log('我是 module3 中 default 方式暴露的函数');
|
||
};
|
||
```
|
||
|
||
|
||
这里,我们采取了一种新的暴露方式(默认暴露),在暴露时,加上了`default`这个关键字。代码里暴露了一个箭头函数,稍后,我们注意在main.js里是怎么引入module3.js的。
|
||
|
||
注意,我们只能写一次 default,也就是说,只能进行一次默认暴露。
|
||
|
||
(4)module4.js:(default方式暴露多个属性)
|
||
|
||
```javascript
|
||
//暴露模块:采用默认暴露的方式。
|
||
//默认暴露的方式可以暴露任意数据类型,暴露的是什么数据,接收到的就是什么数据
|
||
|
||
//语法格式:export default value;
|
||
export default {
|
||
name: '我是 module4 中 default 方式暴露的属性 name',
|
||
foo() {
|
||
console.log('我是 module4 中 default 方式暴露的函数 foo');
|
||
}
|
||
}
|
||
```
|
||
|
||
这里,我们依旧采取了默认暴露的方式,只能写一次 default。代码里暴露了一个对象(对象里存放了一个属性、一个方法)。稍后,我们注意在main.js里是怎么引入module4.js的。
|
||
|
||
如果我想暴露多个属性、多个对象怎呢?很简单,把你想要暴露的所有内容,都放在default里,包成一个对象。你看module4.js就是如此, 同时暴露了多个属性&方法。
|
||
|
||
(5)main.js:
|
||
|
||
这个是主模块。现在,我们来看一下,它如何引入上面的四个模块。
|
||
|
||
|
||
```javascript
|
||
|
||
//主模块。引入其他的模块
|
||
|
||
import { foo1, foo2 } from './module1'; //采用解构赋值的形式进行导入。注意,括号里的对象名,要和 module1 中的对象名一致。
|
||
import { fn1, fn2 } from './module2'; //采用解构赋值的形式进行导入。注意,括号里的对象名,要和 module2 中的对象名一致。
|
||
import myModule3 from './module3'; //module3 模块是采用 default 方式进行暴露的,myModule3 这个名字是我随便起的
|
||
import myModule4 from './module4'; //module4 模块是采用 default 方式进行暴露的,myModule4 这个名字是我随便起的
|
||
|
||
//调用module1、module2中的内容
|
||
foo1();
|
||
foo2();
|
||
fn1();
|
||
fn2();
|
||
|
||
//调用module3中的内容
|
||
myModule3();
|
||
|
||
//调用module4中的内容
|
||
console.log(myModule4.name); //module4中的属性
|
||
myModule4.foo(); //module4中的方法
|
||
```
|
||
|
||
我们可以看出:(具体请看注释,非常重要)
|
||
|
||
- module1和module2是采用**常规暴露**的形式,在引入它们时,模块名要一致。而且,要求用**对象解构赋值**的形式,而不是用 `import myModule from ...`这种形式(否则会报错 undefined)。
|
||
|
||
- module2和module3是采用**默认暴露**的形式,在引入它们时,模块名随便起。
|
||
|
||
(6)index.html:
|
||
|
||
在这里引入main.js即可。
|
||
|
||
```html
|
||
<!DOCTYPE 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>
|
||
|
||
```
|
||
|
||
|
||
### 4、编译转换
|
||
|
||
如果我们不进行转换,而是直接在 index.html 中加载 js/src/main.js,是会报错的:
|
||
|
||
|
||
接下来,我们就进行转换。
|
||
|
||
(1)利用 babel 将 ES6 转换为 ES5:
|
||
|
||
```
|
||
babel src -d build //build目录会自动生成
|
||
```
|
||
|
||
上方命令的意思是,将`src`目录下的所有ES6文件转化为ES5文件,并放在`build`目录下(`build`目录会被自动创建)。
|
||
|
||
转化成ES5之后,我们发现,如果直接在 index.html 中加载`build`目录下的ES5文件,也是会报错的,因为浏览器不认识`main.js`里的`require`关键字:
|
||
|
||
![](http://img.smyhvae.com/20180414_1410.png)
|
||
|
||
|
||
于是,我们还要进行一次转换。
|
||
|
||
(2)利用`Browserify`编译打包 `build`目录下的 ES5 文件:
|
||
|
||
```bash
|
||
browserify build/main.js -o dist/main.js //dist目录需要手动创建
|
||
```
|
||
|
||
dist/main.js就是我们需要引入到 index.html 里的文件。
|
||
|
||
以后,我们每次修改完ES6的代码,就要执行上面的两个命令,重新生成新的js文件。
|
||
|
||
|
||
运行效果:
|
||
|
||
![](http://img.smyhvae.com/20180414_1615.png)
|
||
|
||
|
||
工程文件:
|
||
|
||
- [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的代码了。
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|