js使用require 和 import 引入依赖的区别?

JavaScript 专栏收录该内容
8 篇文章 0 订阅

       require 和 import,都是为了JS模块化使用。最近项目中,因为多人协同开发,出现了一个项目中同时使用了require 和 import 引入依赖的情况。正常情况下,一个项目中最好是对引入方式做一个规范。下面我们就来看一下require 和 import的区别:

一.require

  require是Commonjs的规范,node应用是由模块组成的,遵从commonjs的规范。用法:

  a.js

function test (args) {
  // body...
  console.log(args);	
}

module.exports = {
  test
};

b.js

let { test } = require('./a.js');

test('this is a test.');

    require的核心概念:在导出的文件中定义module.exports,导出的对象类型不予限定(可为任意类型)。在导入的文件中使用require()引入即可使用。本质上,是将要导出的对象,赋值给module这个对象的exports属性,在其他文件中通过require这个方法来访问exports这个属性。上面b.js中,require(./a.js) = exports 这个对象,然后使用es6取值方式从exports对象中取出test的值。

二.import

import是es6为js模块化提出的新的语法,import (导入)要与export(导出)结合使用。用法:

a.js:

export function test (args) {
  // body...
  console.log(args);	
}

// 默认导出模块,一个文件中只能定义一个
export default function() {...};

export const name = "lyn";

b.js:

// _代表引入的export default的内容
import _, { test, name } from './a.js';

test(`my name is ${name}`);

三、commonjs模块与ES6模块的区别

    1.commonjs输出的,是一个值的拷贝,而es6输出的是值的引用;

    2.commonjs是运行时加载,es6是编译时输出接口;

  • 18
    点赞
  • 2
    评论
  • 72
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值