使用 webpack 导出全局函数

Question

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

这是我的切入点：

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

这是我的 formValidator.js:

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

当我加载生成的包并检查全局 FormValidator 时，它是一个具有验证函数的对象。有什么方法可以让验证函数直接分配给 FormValidator 吗？

Answer 1

不使用 ES6 导出语法，而是尝试简单地使用 module.exports = function validate() {}，这应该有效。

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 你应该同时使用 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;

Answer 2

我和你情况一样do.Here是我的代码：

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 但结果是一个 object.That 意味着我不能直接调用 eTrack() , 但应该像 eTrack.eTrack().

这样调用

我试过@Ambroos的方案，把./src/method/eTrack/index.js改成：

module.exports = function eTrack () {

}

这一次捆绑后，我无法在浏览器 window 中访问 eTrack，eTrack 对象消失，它在控制台中抛出 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() tag.Though我不知道@Ambroos的答案和这个解决方案之间的区别。

使用 webpack 导出全局函数

Export global function using webpack

javascript

jint

webpack