require和import的区别

遵循规范

–require 是 AMD规范引入方式

–import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

 

调用时间

–require是运行时调用，所以require理论上可以运用在代码的任何地方

–import是编译时调用，所以必须放在文件开头

 

本质

–require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量

–import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

 

用法

–require理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用

require('./a')(); // a模块是一个函数，立即执行a模块函数
var data = require('./a').data; // a模块导出的是一个对象
var a = require('./a')[0]; // a模块导出的是一个数组

另外说一下 在vue中如果需要动态引入图片，

<img :src="logoSrc" >

export default {
  data () {
    return {
      // 直接引入，会出现图片404，是因为webpack把路径当做了字符串，不会去当做路劲解析图片地址
      logoSrc: './../assets/avatar.png' 
      // require可以将图片作为模块加载进来，被webpack解析
      logoSrc: require('./../assets/avatar.png')
    }
  }
}

–import有严格的格式要求并且必须在文件开头

// 导入默认值 对应export-dafault默认导出的内容
import defaultExport from “module-name”;
// 导入整个模块 然后重命名
import * as name from “module-name”;
// 导入export具体的某个对象或值
import { export } from “module-name”;
// 导入具体内容然后重命名
import { export as alias } from “module-name”;
// 导入具体多个内容
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
// 仅为副作用导入，运行模块中所有代码
import “module-name”;