使用webpack导出全局函数 [英] Export global function using webpack

问题描述

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

I'm trying to write an isomorphic module. The server javascript is going to run inside of JINT. I have created a webpack bundle specifically to build the server version of the module. I want to expose a single function that I can get JINT to call. I am using the scriptEngine.Invoke function from JINT however this is looking for a function on the global object. I don't know how to get a function onto the global object. I have tried using the expose-loader but this seems to export the entire module and I can't get it to just expose a single function.

这是我的切入点：

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

这是我的formValidator.js：

Here is my formValidator.js:

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

当我加载生成的包并检查FormValidator global时，它是一个对象具有验证功能。有没有办法可以将validate函数直接分配给FormValidator？

When I load up the resulting bundle and examine the FormValidator global it is an object with a validate function. Is there a way I can get the validate function to be directly assigned to FormValidator?

推荐答案

我和你的情况相同do.Here是我的代码：

I am in the same situation as you do.Here is my code:

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 / method / eTrack / 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（），但应该像一样调用eTrack .eTrack（）。

Well, after bundled via webpack, I can access eTrack in window but it turn out to be an object.That means I can't call eTrack() directly, but should call like eTrack.eTrack().

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

And I've tried @Ambroos's solution, change ./src/method/eTrack/index.js into：

module.exports = function eTrack () {

}

这次捆绑后，我无法访问 eTrack 在浏览器窗口中， eTrack 对象消失了，它在控制台中抛出 eTrack未定义错误。

This time after bundled, I can't access eTrack in browser window, the eTrack object gone and it throws eTrack is undefined error in the console.

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

Then I found an article that helps a lot:http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

并更改我的 index.js into：

And change my index.js into:

function eTrack () {

}
module.exports = eTrack;

然后一切正常！我可以拨打 eTrack（）直接在< script> 标签。虽然我不知道@ Ambroos的答案与此解决方案之间的区别。

Then everything works as expected!I can call eTrack() directly in <script> tag.Though I don't know the difference between @Ambroos's answer and this solution.

这篇关于使用webpack导出全局函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！