2

如何让 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"]
}

应用程序.js

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

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

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

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

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

但是，如果您在浏览器中查看lodash 库（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 配置比我需要的要复杂得多，并且不确定我需要进行什么逆向工程。

4

1 回答 1

1

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

于 2017-09-19T18:10:55.150 回答