Question

我正在尝试编写一个同构模块。服务器javascript将在JINT内部运行。我专门创建了一个webpack包来构建模块的服务器版本。我想公开一个我可以让JINT调用的函数。我正在使用JINT的scriptEngine.Invoke函数，但是这是在全局对象上寻找一个函数。我不知道如何将函数放到全局对象上。我已经尝试过使用expose-loader，但这似乎导出了整个模块，我不能让它只暴露一个函数。

这是我的切入点：

require("expose?FormValidator!./formValidator.js");

这是我的formValidator.js：

export default function validate () {
    return 'HelloWorld';
}

当我加载生成的bundle并检查FormValidator global时，它是一个带有validate函数的对象。有没有办法让validate函数直接分配给FormValidator？

Answer 1

请尝试使用module.exports = function validate() {}，而不是使用ES6导出语法。

Babel可能就是为什么事情不会像你现在对你的期望那样起作用。使用Babel导出会执行以下操作：

export default function testDefault() {}
export function testNamed() {}

变成

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = testDefault;
exports.testNamed = testNamed;
function testDefault() {}
function testNamed() {}

在这种情况下，导出的对象将具有default（）和testNamed（）。

更新webpack 2 ：在webpack 2中，您无法混合ES6导入和CommonJS导出。如果你使用module.exports，你也应该使用require，如果你使用import，你应该使用与它配对的导出。

在webpack 2中，您不能使用ES6默认导出来使全局可用。目前最常用的解决方案是创建一个小入口点，只需执行以下操作：

// assuming myLibraryEntry is the default export in the required file.
const myLibraryEntry = require('./real-entry-point-in-es6.js').default;

// This makes myLibraryEntry available as whatever you set libraryName to in your config.
module.exports = myLibraryEntry;

Answer 2

我和你的情况一样。这是我的代码：

<强> webpack.config.js：

module.exports = {
    entry: './src/method/eTrack/index.js',
    output: {
        filename: 'eTrack.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'eTrack',
        libraryTarget: 'umd'
    },
};

<强> ./ SRC /方法/电子邮件跟踪/ index.js：

import create from './create';
import getAll from './getAll';
import getByName from './getByName';
import remove from './remove';

export function eTrack () {

}
eTrack.trackers = [];
eTrack.create = create;
eTrack.getAll = getAll;
eTrack.getByName = getByName;
eTrack.remove = remove;

好吧，在通过webpack捆绑后，我可以在窗口中访问eTrack，但结果却是一个对象。这意味着我无法直接调用eTrack()，但应该调用{{1} }}

我尝试了@ Ambroos的解决方案，将 ./ src / method / eTrack / index.js 更改为：

eTrack.eTrack()

捆绑后的这段时间，我无法在浏览器窗口中访问module.exports = function eTrack () { }，eTrack对象消失，并在控制台中抛出eTrack错误。

然后我发现了一篇有用的文章：http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

将我的eTrack is undefined更改为：

index.js

然后一切都按预期工作！我可以直接在function eTrack () { } module.exports = eTrack;标签中调用eTrack()。虽然我不知道@ Ambroos的答案与此解决方案之间的区别。

使用webpack导出全局函数

2 个答案: