require vs import | 易学教程

import和require就是两种不同的JS模块化实现方式而已，由于之前npm生态的很多包都是基础CommonJS规范写的，所以相当一段时间之内必然是import和require这两种模块引入方式共存的。

import是编译时加载，必须放在模块顶部，在性能上会比后者好一些，require是运行时加载，理论上来说放在哪里都可以
import采用的是实时绑定方式，即导入和导出的值都指向同一个内存地址，所以导入值会随着导出值变化。而require在导出时是指拷贝，就算导出的值变化了，导入的值也不会变化，如果想要更新值就要重新导入
es6的export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。可以理解为export导出的是一种引用关系而不是一个具体的值，它们的实质是，在接口名与模块内部变量之间，建立了一一对应的关系.

//会报错
export 1;
var m = 1;
export m;


//以对象的方式导出 就正常
var m = 1;
export { m }

//require就比较简单了，导入是什么 导出就是什么
// test.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
module.exports = { firstName, lastName, year };

// demo.js
const test = require('./test.js');
console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}

特别说明一下，由于require是可以在任意地方引入的，所以，我们在开发中用~引入图片的方式实际上等效于require:

<img src="~assets/img/icon/red_logo.png" class="logo" alt="">
//等效于
<img :src="require('assets/img/icon/red_logo.png')" class="logo" alt="">

-----------------
require是commonjs的语法。路由文件里，在开发环境里通过这种方式加载的是同步，不会影响热更新。

import是es6的语法。 import的是异步，以这种方式调用，将返回一个 promise。

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

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3127390

标签

commonjs

npm