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

如何使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'
        }]
    }
};

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

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

.babelrc

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

app.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'
        }]
    }
};

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（）

相同

这是浏览器中的标准行为还是带有Web包的UMD包装库中的标准行为？这似乎并没有模仿lodash库的行为。我的配置是否以某种方式关闭

---

但是，如果您查看浏览器中的，您可以看到他们实现了它

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的webpack配置比我需要的复杂得多，我也不确定我需要什么来进行反向工程。

将

libraryExport:'default'

添加到webpack的输出配置中；

---

此外，您不需要

babel插件添加模块导出

是的，这是一个很好的变化与更新版本的网页。