import和require的基本使用和区别

import和require的基本使用和区别

在 ES6 中 module 成为标准，使用 import 引入模块，使用 export 语句导出接口，但是在node 环境中，每个文件就是一个模块，采用的是 CommonJS 规范，使用 require 引入模块，使用 module.exports 导出接口。import 和 require 都是被模块化所使用

import

静态 import语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode ，导入的模块都运行在严格模式下。在浏览器中，import 语句只能在声明了 type=“module” 的 script 的标签中使用，是初始化加载依赖项的最优选择
动态 import()类似于函数，它不需要依赖 type=“module” 的script标签，在需要按照一定的条件或者按需加载模块时，动态import() 是非常有用的
在创建JavaScript模块时，export 语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。导出的模块都处于严格模式， export语句不能用在嵌入式脚本中

基本使用：

静态import：

//导入模块的默认导出接口
import defaultExport from "module-name";

//导入整个模块整体并命名
import * as name from "module-name";

//导入单个的接口
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";

export导出语句：

//导出单个接口
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){
    
    ...}
export class ClassName {
    
    ...}

//导出接口列表
export {
    
     name1, name2, …, nameN };

//重命名导出接口
export {
    
     variable1 as name1, variable2 as name2, …, nameN };

//默认导出接口
export default expression;
export default function (…) {
    
     … } 
export default function name1(…) {
    
     … } 
export {
    
     name1 as default, … };

//模块重定向
export * from …;
export {
    
     name1, name2, …, nameN } from …;
export {
    
     import1 as name1, import2 as name2, …, nameN } from …;
export {
    
     default } from …;

动态import：

//像调用函数一样来动态的导入模块，将返回一个promise（这是一个处于第三阶段的提案）
var promise = import("module-name");

//支持await关键字
var module = await import('module-name');

require

requirejs是一个JavaScript模块加载器，它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像 Rhino and Node。使用 requirejs 加载模块化脚本将提高代码的加载速度和质量
require导入的内容为module.exports导出的内容，module.exports 后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量

基本使用：

require导入：
a.js

//导入b.js（.js可省略）模块并赋值给变量d
var d = require('b');
console.log(d.a());  //1
console.log(d.b());  //2
console.log(d.c);  //3

module.exports导出：
b.js

module.exports = {
    
    
  fn1: function(){
    
    
       var a = 1;
       return a;
     },
  fn2: function() {
    
    
       var b = 2;
       return b;
     }, 
  c: 3
}

import和require的区别

遵循规范：

import是ES6的一个语法标准，兼容浏览器需要转化成ES5的语法
require采用CommonJS/AMD规范

调用时间：

import是编译时调用，必须放在代码的开头
require是运行时调用，可以运用在代码的任何地方

实现过程：

import是解构过程，由于浏览器兼容问题，需要在node中用babel将ES6语法转化成为ES5语法再执行
require是赋值过程，require的结果就是module.exports后面的内容，例如对象、函数、字符串、数组等，最终把require的结果赋值给某个变量