import...from 与 import() 的区别异同

import…from

这个其实不用过多的说明了，这是 ES6 中新增的特性，也是现在模块化编程中，我们经常使用的。

使用 export 命令定义了模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。

下面是 import ... from ... 的使用示例

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/Home.vue'

import {firstName, lastName, year} from './profile.js';

至于在 ES6 向 ES5 转译方面，没有过多要求，只要有 babel 就行了。

import()

import() 函数

• import() 函数 是动态加载的，对标 nodejs 中的 require() 。

• import() 返回一个 Promise 对象。

下面是一些 import() 的使用示例

// example1
routes: [
 {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('../views/home.vue')
  }
]

// example2
let someVariable = 'my-jq'
import(`./section-modules/${someVariable}.js`)
.then(module => {
  module.loadPageInto(main);
})
.catch(err => {
  main.textContent = err.message;
});

至于在 ES6 向 ES5 转译方面，需要额外的 babel 的配置。

// .babelrc
// 添加如下配置
{
  "plugins": [
    "syntax-dynamic-import"
  ]
}

这个是最基础的一个仅仅针对 import() 的转译配置。当然，你可以选择使用其他一些 【一劳永逸】的配置，比如：babel-preset-stage-3，它们会包含这个。

两者比较

import...from 是静态的，import()函数 是动态的

import ... from 命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行。所以，下面的代码会报错。

// 报错
if(x === 2) {
  import MyModual from './myModual'
}

上面代码中，引擎处理 import 语句是在编译时，这时不会去分析或执行 if 语句，所以 import 语句放在 if 代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import 和 export 命令只能在模块的顶层，不能在代码块之中（比如，在 if 代码块之中，或在函数之中）。

在 nodejs 中，require 是运行时加载模块，import 命令无法取代 require 的动态加载功能。

const path = '.' + fileName;
const myModual = require(path);

所以，import() 函数就这样被提出来了。

import() 函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import() 函数与所加载的模块没有静态连接关系，这点也是与 import...from 语句不相同。

import() 函数类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载。

Tips

1、import() 函数加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js')
.then(({export1, export2}) => {
  // ...
})

上面代码中，export1 和 export2 都是 myModule.js 的输出接口，可以解构获得。

2、import 函数也可以用在 async 函数之中。

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();

3、最后，如果你在使用 import() 函数的时候，记得在 webpack 中配置 babel-loader，同时，可能还需要相关 babel 的配置。