如何使用 SystemJS 加载命名导出

Question

如果我有一个库，说 utils.js 看起来像这样

exports.foo = function () {
    return 'foo';
};

exports.bar = function () {
    return 'bar';
};

可以如下使用

import {foo} from './libs/utils';

console.log(foo());

不是很壮观，但我感觉这个问题就是this post. Anyway I cannot get this to work in combination with SystemJS中描述的问题的根源。我必须更改代码才能修复它

import utils from './libs/utils';

console.log(utils.foo());

这是我的 systemjs-config 文件：

SystemJS.config({
    map: {
        'plugin-babel': 'node_modules/systemjs-plugin-babel/plugin-babel.js',
        'systemjs-babel-build': 'node_modules/systemjs-plugin-babel/systemjs-babel-browser.js',
    },
    packages: {
        '.': {
            defaultJSExtensions: 'js'
        }
    },
    transpiler: 'plugin-babel'
});

所以，似乎只能加载 exports 对象，而不是命名导出。这可以以某种方式解决吗？

UPDATE 我觉得它可以用 formats

修复

    meta: {
    './libs/utils.js': {
        format: 'cjs'
    }
}

但到目前为止它给出了同样的问题

Answer 1

此行为不是 SystemJS 特定的。 SystemJS 从 0.20 版本开始就这样，因为这是 ES6 模块互操作性标准化的目标。

如您的问题，当您使用 ES6 import 导入 CommonJS 模块（通过 module.exports 导出）时，您将只能获得整个导出，而不能立即解构导出的名称.

但是，当您importing 模块通过 ES6 export 导出时，您将能够解构导出的名称。

所以，这一切都是设计使然。 Guy Bedford 在他的博客上写了这篇文章并引用了 NodeJS 正在进行的模块标准化：

... named exports will no longer be permitted when importing a CommonJS module from an ES module, and is discussed at https://github.com/nodejs/CTC/pull/60/files#diff-2b572743d67d8a47685ae4bcb9bec651R217.

That is, import { name } from 'cjs.js', where cjs.js is a CommonJS module will no longer be supported, and instead will require import cjs from 'cjs.js'; cjs.name.

使用 __esModule:

的互操作解决方法

We will continue to support the __esModule flag in interop though, allowing lifting of named exports for these cases.

So if the cjs.js module was written:
exports.__esModule = true;
exports.name = function () {  ... }
then it would be possible to have import { name } from 'cjs.js';, even though cjs.js is a CommonJS module, although this __esModule will eventually in the longer term be deprecated as well.

如何使用 SystemJS 加载命名导出

How to load named exports with SystemJS

javascript

node-modules

ecmascript-6

systemjs

babeljs