ES6 Module中的export 和import_export const 后面会不会执行-CSDN博客

本文详细介绍了ES6模块的导出与导入方式，包括命名导出与默认导出。通过示例展示了export和import的不同用法，如命名导出的两种语法、导入时的重命名以及默认导出的单一性和导入方式。还提到了混合导入的方法，如在React中的使用。

本文是看《Webpack实战：入门、进阶与调优》这本书之后的感想和总结。

ES6 Module中使用export 来导出模块，export有两种形式:

命名导出

默认导出

1、命名导出的export和import

export

一个模块可以有多个命名导出，命名导出有两种不同的写法：

//写法1,变量的声明和导出写在一行
export const name = "xiaosun";
export const add = function (a,b){ return  a + b; }
//写法2，变量先声明再导出
//calculator.js
const name  = "xiaosun";
const add = function(a,b){ return a + b; }
export{name,add };
//在命名导出的时候可以使用as关键字对变量重命名
export { name , add as getSum };

import
1、注意这里对命名导出的导入必须和导出的变量名一致！2、不可对导入的变量进行修改

//index.js
import { name , add } from './calculator.js'
//也可以对命名的导出变量在导入的时候重命名
import { name, add as getSum } from  './calculator.js'
//在导入多个变量的时候，还可以采用整体导入的方式。
import * as calculator from  './calculator.js'
add(2,3) //输出5

2、默认导出的export和import

export

一个模块的默认导出只能有一个！

//calculator.js
export default{
	name:"xiaosun",
	add:function(a,b){ return a + b;}
}

import
对于默认导出，import后面直接跟变量名，并且这个变量名是可以自己自由指定的。

//index.js
import myCalculator from './calculator.js'
相当于import{ default as  myCalculator } from './calculator.js'

3、混合导入的方法

import React ,{ Component } from 'react'