javascript 使用webpack导出全局函数

yzxexxkh  于 2023-04-28  发布在  Java
关注(0)|答案(3)|浏览(191)

我在写同构模。服务器javascript将在JINT内部运行。我创建了一个webpack bundle,专门用于构建模块的服务器版本。我想公开一个可以让JINT调用的函数。我正在使用脚本引擎。从JINT调用函数,但这是在全局对象上查找函数。我不知道如何在全局对象上获取函数。我试过使用expose-loader,但这似乎导出了整个模块,我不能让它只公开一个函数。
以下是我的切入点:

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

这是我的表格验证器。js:

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

当我加载结果包并检查FormValidator全局时,它是一个带有validate函数的对象。有没有办法让validate函数直接赋值给FormValidator?

jjhzyzn0

jjhzyzn01#

我和你的情况一样。下面是我的代码:

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捆绑后,我可以在window中访问eTrack,但它原来是一个对象。这意味着我不能直接调用eTrack(),但应该像eTrack.eTrack()那样调用。
我试过@Ambroos的解决方案,改变**。/src/method/eTrack/index.js**into:

module.exports = function eTrack () {

}

这次捆绑后,我无法在浏览器窗口中访问eTrackeTrack对象不见了,它在控制台抛出eTrack is undefined错误。
然后我发现了一篇文章,帮助很大:http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html
然后将我的index.js改为:

function eTrack () {

}
module.exports = eTrack;

那么一切都如预期的那样工作!我可以直接在<script>标记中调用eTrack()。虽然我不知道@Ambroos的答案和这个解决方案之间的区别。

l5tcr1uw

l5tcr1uw2#

不要使用ES6导出语法,而是尝试简单地使用module.exports = function validate() {},这应该可以工作。
巴别塔可能就是为什么事情现在不像你期望的那样运转。使用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导出。如果你使用模块。exports你也应该使用require,如果你使用import你应该使用与它配对的export。

在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;
xuo3flqw

xuo3flqw3#

您也可以在模块执行时在窗口对象上注册您的函数。在索引中。js文件,只需添加如下代码:

if (!window.myFunction) {
    window.myFunction = () => { alert('Hello My Function'); }
}

这样一来,就不需要额外配置webpack了。

相关问题