CJS与C语言之间的语法差异ES6模块

时间:2015-06-30 06:40:19

标签: javascript ecmascript-6 commonjs

在CJS模块中,我会使用exportvar plugin = require('plugin');来导出/导入
在ES6模块中,我将使用exportimport * as plugin from 'plugin';来导出/导入。

是否有更多语法差异?这些^差异是否正确?

export defaultexport *是什么?

1 个答案:

答案 0 :(得分:7)

CommonJS模块和ES6模块非常相似,但它们有一些非常重要的差异需要注意。要先直接回答你的问题:

var plugin = require('plugin');
ES6中的

将等同于

// Import all named exports of 'plugin'.
import * as plugin from 'plugin';

和/或

// Import default export of 'plugin'.
import plugin from 'plugin';

// an alias of
import {default as plugin} from 'plugin';

但这取决于'插件'已编写,是否使用ES6 export或CommonJS module.exports编写。

CommonJS模块

CommonJS导入只有一个导出的对象。该对象可以是函数,对象或任何东西。通常CommonJS模块

exports.foo = ...;
exports.bar = ...;

导出命名属性。他们还可能会导出默认值。对象为

module.exports = function(){};

这里的核心问题是,如果你想要一个默认的导出和命名导出,你唯一的选择是将属性直接放到默认导出上。

ES6模块

对于ES6模块,命名导出和默认导出的概念是100%分开的。 e.g。

export var foo = ...;
export var bar = ...;
export default function fn(){};

主要区别在于

fn.foo !== foo;

通过这个例子,有两种情况

插件使用了ES6 export

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;