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

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/csdn_yudong/article/details/87814000

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 代码块之中毫无意义,因此会报句法错误,而不是执行时错误。也就是说,importexport 命令只能在模块的顶层,不能在代码块之中(比如,在 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}) => {
  // ...
})

上面代码中,export1export2 都是 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 的配置。

展开阅读全文

没有更多推荐了,返回首页