在webpack构建后，bundle.js中导出的函数未定义。

Question

我有一个由Webpack管理的构建过程。它将所有文件捆绑在一起并生成一个单独的bundle.js文件。这是非常典型的模式。

但是，当我在网页中包含bundle.js文件时，“导出的默认函数未定义”。为什么我无法从网页上的全局范围访问该导出函数？

这是我的Webpack配置：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js',
    },
    performance: {
        hints: false,
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `bundle.css`,
        }),
    ],
};

这里是一个简化的src/js/index.js文件:

import util from './util';
import as dependency from 'external-library';
import EventEmitter from 'events';

/**
 * MyLibrary module
 * @module MyLibrary
 * @class
 * @param {MyLibraryOptions} options - Options to initialize the module with
 * @returns {Object} MyLibrary instance
 */
export default function MyLibrary(options) {
    if (!(this instanceof MyLibrary)) {
        return new MyLibrary(options);
    }
    
    //...Do a bunch of stuff.

}

我们的目标是将bundle.js包含在网页中，并在脚本标签中访问，例如：

var instance = new MyLibrary({option_1: value, ...})

然而，每次我这样做时，MyLibrary 总是未定义的。 更新： 添加了 library 属性后，MyLibrary 不再是未定义的，但我无法调用它。现在它是一个模块。 更新2 --> 解决方案：

module.exports = {
    entry: './src/js/index.js',
    output: {
        library: 'MyLibrary',
        libraryTarget: 'umd',
        libraryExport: 'default',
        path: path.resolve('dist'),
        filename: 'bundle.js',
   }
...

- calbear47

---

最后一行代码是否在运行浏览器？ - Calder White

@CalderWhite 是的，我收到了一个错误，提示MyLibrary未定义。 - calbear47

你是怎么在网页中引入js的？使用<script src="..">标签还是其他方式？ - h00ligan

@h00ligan 没错。我只是在我的库实例化之前用一个 script 标签包含了我的 JS 文件（在我的情况下是 bundle.js）。 - calbear47

Answer 1

在webpack中，默认的作用域不是全局的。它将所有代码封装在一个匿名函数中。要将库暴露给浏览器的全局作用域，请使用此答案。

你的webpack配置应该像这样：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        library: 'MyLibrary',
        path: path.resolve('dist'),
        filename: 'bundle.js',
    },
    performance: {
        hints: false,
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, 'src'), 'assets'],
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `bundle.css`,
        }),
    ],
};

- Calder White

---

是的，就是这样。我只想调用MyLibrary()函数。 - calbear47

我相信libraryTarget与你所需的有关。尝试我的编辑，如果不起作用，我们可以从此文档继续了解：https://webpack.js.org/configuration/output/#outputlibrarytarget。 - Calder White

@calbear47 ^^^^ - Calder White

libraryTarget 看起来很有前途。但是，当我尝试 'assign' 选项时，我仍然像以前一样得到了一个模块。 - calbear47

让我们在聊天中继续这个讨论。 - Calder White