CJS&之间的语法差异ES6模块 [英] syntax differences between CJS & ES6 modules

问题描述

在CJS模块中，我将使用export和var plugin = require('plugin');   导出/导入
在ES6模块中，我将使用export和import * as plugin from 'plugin';进行导出/导入.

In CJS modules I would use export and var plugin = require('plugin');     to export/import
In ES6 modules I would use export and import * as plugin from 'plugin'; to export/import.

还有更多语法差异吗?这些^差异正确吗?

Are there more syntax differences? are these ^ differences correct?

export default和export *是什么?

推荐答案

CommonJS模块和ES6模块非常相似，但是需要注意一些非常重要的区别.首先要直接回答您的问题:

CommonJS modules and ES6 modules are pretty similar, but they have some very important differences to be aware of. To answer your question directly first:

var plugin = require('plugin');

ES6中的

等同于两者

in ES6 would be equivalent to both

// 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编写的.

but it depends on how 'plugin' has been written and whether it was written with ES6 export or CommonJS module.exports.

CommonJS导入只有一个导出对象.该对象可以是函数，也可以是对象，也可以是任何东西.通常CommonJS模块可以做到

CommonJS imports only have a single exported object. That object may be a function, or an object, or anything. Generally CommonJS modules do

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

导出命名属性.他们还可以将默认"对象导出为

to export named properties. They may also export a 'default' object as

module.exports = function(){};

这里的核心是，如果要同时使用默认导出和命名导出，则唯一的选择是将属性直接直接放在默认导出上.

The core thing here is that if you want both a default export AND named exports, your only option is to actually put the properties directly onto the default export.

对于ES6模块，命名导出和默认导出的概念是100％分开的.例如

For ES6 modules, the concepts of named exports, and default exports are 100% separated. e.g.

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

主要区别在于

fn.foo !== foo;

那么在这个例子中，有两种情况

With this example then, there are two cases

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是实时绑定.这意味着，如果稍后在模块内部对其进行更新，则它将在您的导入中进行更新，例如

Live Binding import/export

The other primary difference in your example is that plugin is a live binding. That means that if it is updated inside the module later, it will update itself in your import, e.g.

// 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;

这篇关于CJS&之间的语法差异ES6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！