CommonJS 模块和 ES6 模块非常相似,但它们有一些非常重要的差异需要注意。首先直接回答你的问题:
var plugin = require('plugin');
在 ES6 中相当于两者
// Import all named exports of 'plugin'.
import * as plugin from 'plugin';
and/or
// Import default export of 'plugin'.
import plugin from 'plugin';
// an alias of
import {default as plugin} from 'plugin';
但这取决于“插件”是如何编写的以及是否是用 ES6 编写的export
或 CommonJSmodule.exports
.
CommonJS 模块
CommonJS 导入只有一个导出对象。该对象可以是函数、对象或任何东西。通常 CommonJS 模块会这样做
exports.foo = ...;
exports.bar = ...;
导出命名属性。他们还可以将“默认”对象导出为
module.exports = function(){};
这里的核心是,如果您既想要默认导出又想要命名导出,则唯一的选择是将属性直接放在默认导出上。
ES6模块
对于 ES6 模块,命名导出和默认导出的概念是 100% 分开的。例如
export var foo = ...;
export var bar = ...;
export default function fn(){};
主要区别在于
fn.foo !== foo;
那么以这个例子来说,有两种情况
插件使用ES6export
import * as plugin from 'plugin';
plugin.foo === ...;
plugin.bar === ...;
typeof plugin === 'object';
import plugin from 'plugin';
plugin.foo === undefined;
plugin.bar === undefined;
typeof plugin === 'function';
使用 CommonJS 的插件module.exports
import * as plugin from 'plugin';
plugin.foo === ...;
plugin.bar === ...;
typeof plugin === 'object';
import plugin from 'plugin';
plugin.foo === ...;
plugin.bar === ...;
typeof plugin === 'function';
实时绑定导入/导出
您的示例中的另一个主要区别是plugin
是实时绑定。这意味着如果稍后在模块内更新它,它将在您的导入中更新自身,例如
// plugin.js
export var foo = 'foo';
export function update(){
foo = 'bar';
}
// other.js
import {foo, update} from 'plugin';
foo === 'foo';
update();
foo === 'bar'
如果你这样做的话,情况就不会是这样
var foo = require('plugin').foo;
var update = require('plugin').update;