webpack的多种导入导出方式

**

CMD有三种方式导出*

第一种使用exports导出 //common.js //使用define定义模块，require、exports、module是define自带的

define(function(require, exports, module){ //定义导出的方法 function minus(a, b) { return a - b } // 使用exports导出 exports.minus = minus })

第二种使用moudle导出 //common.js //使用define定义模块，require、exports、module是define自带的

define(function(require, exports, module){ //定义导出的方法 function minus(a, b) { return a - b } // 使用module.exports导出 module.exports = { minus } })

第三种使用return 返回 //common.js //使用define定义模块，require、exports、module是define自带的

define(function(require, exports, module){ //定义导出的方法 function minus(a, b) { return a - b } // 使用return导出 return { minus } })

都可以用同一种方法导入

let common= require('./common') // 文件相对路径 //调用减法的方法 console.log(common.minus(5,4)) //结果：１

AMD是requireJs在推广过程中生产的对模块定义的规范 属于异步模块定义，依赖前置，在最上面加载模块 使用define定义 define(依赖的模块，执行的回调函数) 定义如下如下：

//common.js // define后使用[]的原因是没有依赖模块， 如果有使用，如：[‘jquery’]

define([], function(){ // 导出方法 return function(a, b) { return a - b } })

引用如下

//导入方法，require方法中有三个参数 //require(模块依赖，类型为数组[依赖的地址或模块名称], 会掉函数) // 回调函数中会接收到模块作为参数，如下minus

require(['./common.js'], function(minus){ console.log(minus(5,4)) //结果：1 }) commonJS commonjs使用模块化，经常用于后台 导入导出方法如下： //common.js module.exports = function(a, b) { return a-b }

引用如下

let minus = require('./common.js') //文件相对路径 console.log(minus(5,4)) // 结果： 1

es6

es6模块化 通常有两种方式导出export(导出), export default(默认导出)，通常采用import导入 下面分别使用两种方法导出

第一种导入导出方式 export 导出如下 //

common.js function minus(a,b) { return a-b } // 使用export，一定要使用{}导出，否则会报错 export { minus } // import 后采用大括号导入，大括号中是变量名，变量名要跟导出的名称一致 // from 后跟文件文件路径 这里是相对路径 import {minus} from './common.js' //调用方法 minus(5,4) //结果：1 //另一种导入方式 意思就是全部导入 as为重命名为导入的变量重新取一个名字 import * as common from './common.js' // 调用方式 common.minus(5,4) //结果：1

第二种导出方式 export default 导出如下

// common.js function minus(a,b) { return a-b } // 使用export default 后不用使用{} export default minus

导入如下

// import 后不采用{}导入，后跟的变量名可以随意更改，想取什么取什么 // from 后跟文件文件路径 这里是相对路径 import minus from './common.js' //调用方法 minus(5,4) //结果：1 //我改为另一个名称 import common from './common.js' // 调用方式 common(5,4) //结果：1