【com】require和import，动态和静态

一、require和import的区别

require用于读取并执行js文件， 并返回该模块的exports对象， 若无指定模块， 会报错。CommonJS规范加载模块是同步且动态的， 只有加载完成， 才能执行后续操作。可以在代码中引入

import用于引入外部模块， 其他脚本等的函数， 对象或者基本类型。
import属于ES6的命令， 它和require不一样， 它会生成外部模块的引用而不是加载模块，等到真正使用到该模块的时候才会去加载模块中的值。

二、动态引入和静态引入

webpack支持node的commonJS标准，而且它的require实现和node极为类似；所以将node的require和webpack的require放在一起讲：
而且因为vue用了webpack，所以在vue中webpack的require也可以使用；
require是动态引入，因为他是运行时调用，可以放在代码的任何位置。
使用webpack的require需注意：

let url = "@/assets/images/carousel/logo.svg"
require(url)    //报错

let url = "logo.svg"
require("@/assets/images/carousel/"+url); //正确

不能直接给require变量，要给require一个初始的地址，具体的文件名给变量，以方便遍历

而import支持静态引入和动态引入两种：

1.静态引入

import { a, b, c } from "./a";

2.动态引入

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

PS1：区分静态和动态

静态是按照文件的嵌套关系找到文件或者分析代码，不需要运行
动态与执行顺序有关，会在执行的过程中根据变化进行一些操作

PS2：node中两种导出方式的区别

1.置换exports整个对象

module.exports = {}   
const lib = require("xxx")

2.不置换，只是编辑exports，加属性，这个aaa就是key

exports.aaa === module.exports.aaa
exports.aaa = 123
const {aaa} = require("xxx")

无论时哪种，最后返回的都是exports对象，都可以通过键值从里边拿值

PS3：ES6中两种导出方式的区别

1.export
export   func1=()=>{}
export   func2=()=>{}
import { func1, func2 } from 'xxx';

2.export default
export default class Example{}
import Example from "xxx"