- 对比路由中引入模块的语句
component(resolve){require([../${component}.vue
], resolve) }与 import( /webpackChunkName:page/ ‘…/page.vue’);
借鉴了博主的文章:地址
遵循规范
- require 是 AMD规范引入方式
- import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 (babel)
调用时间 - require是运行时调用,所以require理论上可以运用在代码的任何地方
- import是编译时调用,所以必须放在文件开头
本质 - require是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把require的结果赋值给某个变量
- import是解构过程,但是目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require
使用
require / exports :
遵循 CommonJS/AMD,只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行**静态优化**。
用法只有以下三种简单的写法:
单个模块的导出:exports.fs = fs
let obj = {name:1}
exports.obj = obj;
多个模块的导出: module.exports = fs
function func1(){}
function func2(){}
function func3(){}
function func4(){}
module.exports = {
func1,
func2,
func3,
func4,
}
模块的引入:const fs = require(‘fs’)
let obj = require('./testJS');
//{ func1: [Function: func1],
//func2: [Function: func2],
//func3: [Function: func3],
//func4: [Function: func4] }
import / export: (需要结合webpack使用,直接使用会报错)
遵循 ES6 规范,支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。
- 直接导出单个模块并引入
//test1.js
export default {
name:1
}
//test2.js
import obj from './test1.js';
- 导出,引入多个模块
//importFile.js
export function name (option){
console.log("name")
}
export function code (option){
console.log("code")
}
//test2.js
import * as fR from './utils/importFile';
//此时的 fR 是一个模块的集合,可以通过如下的写法调用需要的模块
//fR.name
/**
ƒ name(option) {
console.log("name");
}
*/
- 使用export 导出与之后的引入
//importFile.js
export function name (option){
console.log("name")
}
export function code (option){
console.log("code")
}
//除了使用上面的引入一个模集合,还可以有下面这样的写法
//test2.js
import {name} from './utils/importFile';
/**
ƒ name(option) {
console.log("name");
}
*/
如果使用 写成 这样的形式:
import name from './utils/importFile';
//undefined
可以引用多个
import {name,code} from './utils/importFile';
- export const 命名导出
// importFile.js
export const a = {obj:1}
export const b = {obj:1}
export const c = {obj:1}
export const d = {obj:1}
// test2.js
import {a,b,c,d} from './utils/importFile'
与上面的写法是一致的,不过const 可以防止变量重名
通过require引入基础数据类型时,属于复制该变量。
通过require引入复杂数据类型时,数据浅拷贝该对象。
出现模块之间的循环引用时,会输出已经执行的模块,而未执行的模块不输出(比较复杂)
CommonJS模块默认export的是一个对象,即使导出的是基础数据类型