如何在不使用 Module.default 符号的情况下将我的模块导出到浏览器？

Question

如何让 webpack 将我的模块直接暴露给浏览器的模块名称而不是使用 Module.default？

这是我的应用程序设置的简化方式，希望能描绘出我希望实现的目标。

webpack.config.js

module.exports = {
    entry: './src/app.js',
    devtool: 'source-map',
    output: {
        path: './lib',
        filename: 'app.js',
        library: 'App',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }
};

.babelrc

{
    "presets": ["es2015"],
    "plugins": ["babel-plugin-add-module-exports"]
}

app.js

export default function main() {
    console.log('The default function');
}

export function other() {
    console.log('A random function');
}

因为我在输出中将 "App" 指定为 "library"，所以我的库在浏览器中作为 App.

可用

奇怪的是...为了使用导出的默认函数，我必须做 App.default。但是要使用 other 导出函数，我可以这样做：App.other。我希望我可以 App() 来调用默认的导出函数，而另一个是相同的 App.other().

这是浏览器中的标准行为还是带有 webpack 的 UMD 包装库？这似乎并没有模仿 lodash 库的行为。我的配置有什么问题吗？

但是，如果您在浏览器中查看 lodash library (repo)，您会发现他们已经实现了。

Lodash 是使用 webpack 构建的。如果你查看 lodash 的 package.json 内部，你可以看到主文件是 lodash.js。如果您查看该文件，它似乎是 UMD 包装的（UMD 定义在文件底部）。因此，当我做这样的事情时：

import _ from 'lodash';
// or
import {clamp} from 'lodash';

一切正常。

另一件工作正常的事情是在 HTML 文件中引用那个确切的文件：

<script src="node_modules/lodash/lodash.js"></script>

这允许我访问 lodash 对象。

console.log(_) // function
console.log(_.clamp) // function clamp(number, lower, upper) { ... }

我怎样才能得到相同的行为。 Lodash 的 webpack 配置比我需要的复杂得多，我不确定我需要逆向工程什么。

Answer 1

在webpack的输出配置中添加libraryExport: 'default'；你也不需要 babel-plugin-add-module-exports。

如何在不使用 Module.default 符号的情况下将我的模块导出到浏览器？

How can I get my module exported to the browser without using Module.default notation?

javascript

ecmascript-6

webpack

lodash

umd