require与import

 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}`);

 

3、commonjs模块与ES6模块的区别
    1.commonjs输出的，是一个值的拷贝，而es6输出的是值的引用；

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

 

 

文章目录 概念 1、ES6模块化的使用 1、es6中的export 2、es6中的import 2、CommonJs规范的使用 1、CommonJs中的exports 2、CommonJs中的require 3、CommonJs规范与ES6中import的区别 1、引入模块的不一样点 2、引入模块的性能不一样点 3、暴露模块的不一样点 4、在nodeJs中怎么使用 概念 CommonJs是一种模块化规范，在ES6以前的，用于服务器端nodeJs和浏览器端。 ES6标准发布后，模块化标准是以export指令导出接口，以import引入模块。 可是在node模块中，咱们依旧不少地方采用的是CommonJS规范 即：使用module.exports导出接口，使用require引入模块。 这两种方式咱们或多或少都有用过，只是不了解这是2种不一样的规范 1、ES6模块化的使用 es6中模块化靠export { }暴露导出模块，靠import ... from '...'引入模块 1、es6中的export 模块js使用export命令输出变量 注意：这里输出的必须是变量，而不能是值(包括方法) 注意：export命令不须要=，只要后面跟一个变量便可 正确示例： // 直接暴露
export var test = 'Michael'; // 设置变量暴露
var test = 'Michael'; export { test } 错误示例： // 直接暴露
export 1;    //报错 // 设置变量暴露

var test = 1; export test; //报错
 以上错误的缘由，是由于export命令后面不是变量而是一个值，即便是赋值给了test，它也是一个值(方法同理)。 正确用法中是把值包在了对象里{ test } 2、es6中的import 目标文件，使用import ... form '...'引入模块(前提是暴露模块正确) import命令引入没什么坑，主要延伸是结合ES6的解构赋值 普通引入示例 import fs from 'fs'        //引入整个fs模块

var test = fs.star(....)    //调用fs模块中的star方法
 解构引入示例 import { stat,readFile } from 'fs'        //引入fs模块中的stat,readFile方法，其他不引入

var test = star(....)    //调用fs模块中的star方法
 2、CommonJs规范的使用 CommonJs规范靠exports.xx = xx或module.exports = { xx }暴露导出模块。 靠var xx = require('...')或var { stat, exists, readFile } = require('fs');引入模块 1、CommonJs中的exports 注意：这里的exports不是一个命令 注意：这里的exports是有s的，且后面须要使用=，这里个人理解，exports自身是变量，引入就是依靠这个变量进行的 使用exports示例 var test = 1; exports.test = test;  使用module.exports示例 var test = 1; module.exports = { test } 
2、CommonJs中的require 导入也没什么坑，一样可使用解构 普通引入示例 var fs = require('fs')        //引入整个fs模块

var test = fs.star(....)    //调用fs模块中的star方法
 解构引入示例 var { stat,readFile } = require('fs')        //引入fs模块中的stat,readFile方法，其他不引入

var test = star(....)    //调用fs模块中的star方法
 3、CommonJs规范与ES6中import的区别 1、引入模块的不一样点 require('xx')能够直接做为一个对象,也就是能够直接当成变量来使用，不赋值。如：require('xx').star(...) 而es6的import ... form ...是固定写法，不能操做 2、引入模块的性能不一样点 CommonJs规范的引入require('xx')是“运行时加载” 而es6的import ... form ...是按需引入，编译过程按照import命令来选择编译 3、暴露模块的不一样点 在上面使用介绍，暴露模块的区别已经很明显了: es6的export命令不用=暴露一个变量（通常为对象） CommonJs的exports.xx=xx，是依靠exports变量自身来暴露的 4、在nodeJs中怎么使用 咱们都知道es6是绝对通用的规范，且会更新到es七、es8等。而既然es6有模块化的方法，那么CommonJs规范将逐步被替换。 可是如今而言，import、export等不少es6命令，还须要依靠编译成es5来实现。 好比在vue-cli当中，es6的使用就须要依赖webpack的babel进行编译成es5。 因此在nodeJs中若是不引入babel或其余方法来编译es5的话，依旧须要老老实实使用CommonJs规范。 ndoeJs使用es6import、export命令的解决方法，能够看阮一峰老师的ECMAScript6，.mjs后缀文件名 本文参考阮一峰老师的ECMAScript6 与一些关于js编译与运行的博客

 

 

 

.