es6 import 和node 的require

服务器端 node的module遵循CommonJS规范,浏览器端 requirejs遵循AMD,seajs遵循CMD
在node模块中,采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。
ES6标准发布后,module成为标准,使用import引入模块,使用export指令导出接口,

// a.js

// -------- node -----------
module.exports = {
a : function() {},
b : 'xxx'
};

// ----------- AMD or CMD ----------------
define(function(require, exports, module){
module.exports = {
a : function() {},
b : 'xxx'
};
});
// b.js

// ------------ node ---------
var m = require('./a');
m.a();

// ------------ AMD or CMD -------------
define(function(require, exports, module){
var m = require('./a');
m.a();
});
在浏览器端的模块中要使用一个define函数来提供模块的闭包以外,其他代码可以完全一致。
node中的module采用CommonJS规范,require只是node的一个私有的全局方法,module.exports也只是node私有的一个全局变量属性
ES6发布的module并没有直接采用CommonJS,甚至连require都没有采用,也就是说,跟标准半毛钱关系都没有。
4. export导出模块接口(在要导出的接口前面,加入export指令。)

export default function() {}
export function a () {}
var b = 'xxx';
export {b}; // 这是ES6的写法,实际上就是{b:b}
export var c = 100;

  1. export 的错误的用法

export 1; // 绝对不可以
var a = 100; // 不可以
export a;
export在导出接口的时候,必须与模块内部的变量具有一一对应的关系。export a 虽然看上去成立,但是 a 的值是一个数字,根本无法完成解构,因此必须写成 export {a} 的形式。即使a被赋值为一个function,也是不允许的。大部分风格都建议,模块中最好在末尾用一个export导出所有的接口,例如:export {fun as default,a,b,c};

  1. import导入模块(import的语法跟require不同,而且import必须放在文件的最开始,import后面跟上花括号的形式是最基本的用法,花括号里面的变量与export后面的变量一一对应)

import $ from 'jquery';
import * as _ from '_';
import {a,b,c} from './a';
import {default as alias, a as a_a, b, c} from './a';
as 关键字,取别名
default关键字,其实是别名的语法糖, 这个语法糖的好处就是import的时候,可以省去花括号{};import $,{each,map} from 'jquery';import后面第一个 $ 是 {defalut as $} 的替代写法。
通过*号直接继承某一个模块的接口(尽可能少用,它实际上是使用所有export的接口,但是很有可能你并不会用到所有接口,可能仅仅是一个)

  1. 用require还是import?

require使用简单,相当于module.exports的传送门,module.exports后面的内容是什么,require的结果就是什么,对象、数字、字符串、函数……再把require的结果赋值给某个变量,相当于把require和module.exports进行平行空间的位置重叠。而且require理论上可以运用在代码的任何地方,甚至不需要赋值给某个变量之后再使用,
比如:require('./a')(); // a模块是一个函数,立即执行a模块函数var data = require('./a').data; // a模块导出的是一个对象;var a = require('./a')[0]; // a模块导出的是一个数组
你在使用时,完全可以忽略模块化这个概念来使用require,仅仅把它当做一个node内置的全局函数,它的参数甚至可以是表达式:require(process.cwd() + '/a');
但是import则不同,它是编译时的(require是运行时的),它必须放在文件开头,而且使用格式也是确定的,不容置疑。它不会将整个模块运行后赋值给某个变量,而是只选择import的接口进行编译,这样在性能上比require好很多。
从理解上,require是赋值过程,import是解构过程,当然,require也可以将结果解构赋值给一组变量,但是import在遇到default时,和require则完全不同: var $ = require('jquery'); 和 import $ from 'jquery' 是完全不同的两种概念。
还是没有回答“改用require还是import?”这个问题因为目前所有的引擎都还没有实现import,我们在node中使用babel支持ES6,也仅仅是将ES6转码为ES5再执行,import语法会被转码为require。这> 也是为什么在模块导出时使用module.exports,在引入模块时使用import仍然起效,因为本质上,import会被转码为require去执行。
现在开始使用import

posted @ 2018-03-12 17:54  候瑞娟  阅读(237)  评论(0编辑  收藏  举报