ES6笔记：import与export简单使用

先安装好NPM与Node，略

使用import需要es6支持，所以需要使用babel模块。

npm install --save-dev babel-preset-es2015

babel转译js

babel --presets es2015 文件夹 旧(es6) -d 文件夹新(es5)

首先建立两个文件夹：es6和es5，在es6里新建idnex.js 和m1/m2/m3/m4.js

es6存放我们用新语法写的代码，es5是babel转译后的文件。

我们在命令行中使用 node xx.js执行文件。

后面所有操作：默认都会转译代码！

这个时候是没法直接运行：node ./es6/index.js会出错，需要转译。

文件准备好了，先看看第一个命令

 

export命令：使用导出命令 

方法一:文件m1.js

   导出与引入变量名和方法名要一致！    

export var a = 1;
export var b = 2;
export var c = () => {
	console.log('我是箭头函数c');
}
export function d() {
	console.log('我是函数声明d');
}

index.js

import {
	a,
	b,
	c,
	d
} from './m1.js';
console.log(a);
console.log(b);
c();
d();

方法二:使用大括号导出

文件m2.js      ：使用了别名，在index中直接使用m2_a引入      

var a = "我是m2.js 的 a";
export {
	a as m2_a
}

index.js

import {
	a,
	b,
	c,
	d
} from './m1.js';
import {
	m2_a
} from './m2.js';
console.log(m2_a);
console.log(a);
console.log(b);
c();
d();

看看运行结果：

方法三：这个方法是引入默认方法，如果只有一个匿名方法，可以直接在引入页面，自定义名称使用。

文件m3.js:接下来，我们在index中可以自定义名称，不需要使用{}。
                       

var m = ()=>{console.log('m')}

export default m
//这个m仅仅在本文件内有效！

 index.js：自动导入匿名函数。

import m3 from './m3.js';
m3();

看看输出：

方法四：整体引入

使用* as 自定义名 可以整体引入一个模块。
          

      import * as m_1 form ''m1.js;

                console.log(m_1.a);

                m_1.c();

                m_1.d();

使用module替代import整体引入               

 module m_1 from 'm1.js';

                m_1.c();

如果需要同时引入default函数和其它的变量      :m4.js       

export default function zz() {
	console.log("我是zz函数");
}
export var a = "a";

 index.js

//一般只能一如一个方默认方法，如果需要同时引入默认方法和其它的变量
import  myN, {
	a
} from './m4.js';
console.log(a);
myN();

 看看输出结果：

 

。(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤完、