require 和 import 的区别

require 和 import都是为了JS代码中模块化编

本质上的区别：

• equire是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
• import是解构过程，但是目前所有的引擎都还没有实现import，在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

1.以vue写法为例require 和 import 的区别：

require

<img :src="require('./img/test.png')"/>;

也可以设置全局变量来引入

export default {name: "HelloWorld",data() {return {png:require('./img/test.png')}}
}

import

<script>import test1 from '../../assets/img/test_1.png';import test2  from '../../assets/img/test_2.png';export default {data () {return {path1: test1,path2: test2};}};
</script>

2.模块化引入

require

//test.js
const obj = {name:'小明'
}
exports.obj = obj
// module.exports = obj 另外一种写法

<!--test.vue-->
<template><div><span>{
   {msg}}</span></div>
</template>
<script>
const test = require('../../utils/test.js')
export default {name:'Test',data(){return{msg:''}},created(){this.msg = test.obj.nameconsole.log('require=',this.msg)}
}
</script>
<style></style>

相比较于require引入import的引入更多样化些

//test.vue
const user = {name:'小明',age:18,height:180,weight:70
}
export default  user

<!--test.vue-->
<template><div></div>
</template>
<script>
import user from '../../utils/test.js'
export default {name:'Test',data(){return{}},created(){console.log('import=',user.name,user.age)}
}
</script>
<style></style>

import * as XX from 'path'(全部引入更改别名和部分引入更改别名)

/**全部引入更改别名
*/
//test.js
export function getName(){return '小明'
}
export function getAge(){return '18'
}
//test.vue
<script>
import * as usr from '../../utils/test.js'
export default {name:'Test',data(){return{name:'',age:''}},created(){console.log('import===',usr.getName(),usr.getAge())}
}
</script>
<-----------------------------控制台输出:import=== 小明 80----------------------------->
/*
*部分引入
*/
//test.js
export function getName(){return '小明'
}
export function getAge(){return '18'
}
export function getHeight(){return 180
}
export function getWeight(){return 70
}
<!--test.vue-->
<script>
import { getName, getAge, getWeight} from '../../utils/test.js'
export default {name:'Test',data(){return{name:'',age:''}},created(){console.log('import:',getName(),getAge()+'岁',getWeight()+'斤')}
}
</script>
<-----------------------控制台输出:import: 小明 18岁 70斤----------------------------->
/*
*部分引入更改别名
*/
<script>
import { getName as name} from '../../utils/test.js'
export default {name:'Test',data(){return{name:'',age:''}},created(){console.log('import:',name())}
}
</script>
<-----------------------控制台输出:import: 小明----------------------------->