javascript - 如何使用 SystemJS 加载命名导出

Question

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

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

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

可以如下使用

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

console.log(foo());

不是很壮观，但我感觉这个问题是 this 中描述的问题的根源邮政。无论如何，我无法将其与 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 对象，而不是命名的导出。这可以以某种方式解决吗？

更新 我觉得它可以用 formats 修复

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

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

Answer 1

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

当您在问题中使用 ES6 import 导入 CommonJS 模块(通过 module.exports 导出)时，您只会获得整个导出，并且您无法立即解构导出的名称。

但是，当您导入通过 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.