require 与 import

common.js 模块化规范

  app.js 文件：

// require 在代码执行阶段才会调用引入文件，编译（预解析）时不会执行，所以下面会报错
// console.log(dep); ReferenceError: dep is not defined
const dep = require('./dep'); // require 加载的是一个对象（即 module.exports 属性, 不是exports）， const定义的变量不会预解析
console.log(dep); // { count: 1 }

  dep.js 文件：

var count = 0;
count = 1;
exports.count = count; // 默认 exports 和 module.exports 指向同一个对象，使用 exports 和 module.exports 没有区别
// require/exports 输出的是值的拷贝。这里输出的是1，不是变量count, 所以后面的count变化不会影响当前的输出
// require/exports 针对基础数据类型是值的拷贝，导出复杂数据类型时浅拷贝该对象

exports = {a:300}; // 如果将 exports 指向了其他对象，exports 改变不会改变模块输出值
count = 2;
// 当前模块的输出值是module.exports指向的对象， 不是exports指向的对象

 

 

 

ES6 模块化规范

  index.js 文件：

// 第1种导出方式
export let address = "cz";
export let obj = { b:2}; // import/export输出的是值的引用
address = "河北省沧州市" // 当前文件执行完后，才会输出值，输出的 address = "河北省沧州市"
    上面等价于：
        let address = "cz";
        export {address}

// 第2种导出方式
let name = "nodejs";
export default {name} // 这种导出的语法，一个js文件只能写1次

  app.js 文件：

// import {address, obj } from "./index" // 第 1 种导出方式，引入数据
// import index from "./index" // 第 2 种导出方式，引入数据

// 2种导出方式混合引入
import index, {address, obj} from "./index" // import 命令是编译(预解析)阶段执行的，所以在import之前使用导入的变量也可以访问到

// 不能对 import 引入的变量重新赋值/定义
// address = "河北省保定市" // SyntaxError: src/app.js: "address" is read-only
console.log(index.name, index.age, address, obj); // nodejs 14 河北省沧州市 {  b: 2 }

require 与 import 的区别

1. 属于不同的模块规范 require/exports -> CommonJS ; import/export -> ES6
2. 加载模块时机不同： require -> 运行时直接加载模块 ; import -> 编译时加载模块
3. require 可以写在代码的任意位置， import 只能写在文件的最顶端且不可在条件语句或者函数作用域中使用
4. require/exports输出的是一个值的拷贝； import/export 输出的是值得引用，不能对引入模块重新赋值/定义
5. 是否采用严格模式: commonjs 导出的模块默认不使用严格模式, es6 默认调用严格模式

   exports.fun = ()=>{
    mistypedVaraible = 17; //没有调用严格模式，不会报错
   };
   
   export default var fun=()=>{
       mistypedVaraible = 17; //报错，mistypedVaraible is not defined
   };

6. import(modulePath)  表达式加载模块并返回一个 promise

   import('/modules/my-module.js') //动态导入
     .then((module) => {
       // Do something with the module.
   });