require 和 import 的区别

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

require	import
动态加载	静态加载
不是关键字	关键字
运行时调用	编译时调用
AMD规范引入方式	es6的一个语法标准

 

 

 

 

 

 

本质上的区别：

• 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.name
        console.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: 小明----------------------------->