webpack 4 TypeError：“对象（...）不是函数”答案

【问题标题】：webpack 4 TypeError: "Object(...) is not a function"webpack 4 TypeError：“对象（...）不是函数”
【发布时间】：2019-09-19 04:29:33
【问题描述】：

我有一个简单的 js 文件，我正在尝试使用 webpack 4：

const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const ClosurePlugin = require('closure-webpack-plugin')
const path = require('path');

module.exports = env => {
    console.log("Building with env", env)
    const config = {
        entry: {
            index: './src/index.js',
            "network-mapper": './src/network-mapper/network-mapper.js'
        },
        externals: {
            'angular': 'angular',
            'cytoscape': 'cytoscape'
        },
        output: {
            filename: '[name].[contenthash].js',
            path: path.resolve(__dirname, 'dist'),
            libraryTarget: 'umd'
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader'],
                },
                {
                    test: /\.(html)$/,
                    use: {
                        loader: 'html-loader',
                    }
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    //loader: 'babel-loader'
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                template: __dirname + '/src/public/index.html',
                filename: 'index.html',
                inject: 'body'
            }),
            new CopyPlugin([
                {from: __dirname + '/src/public'}
            ])
        ],
        optimization: {
            // We no not want to minimize our code.
            minimize: false
        }
    };
    config.mode = (env.development === 'false' ? 'production' : 'development')

    if (env.development === 'false') {
        // config.optimization = {
        //     concatenateModules: false,
        //     minimizer: [
        //         new ClosurePlugin({mode: 'AGGRESSIVE_BUNDLE'}, {
        //             // compiler flags here
        //             //
        //             // for debuging help, try these:
        //             //
        //             // formatting: 'PRETTY_PRINT'
        //             // debug: true,
        //             // renaming: false
        //         })
        //     ]
        // }
    }
    return config;
}

我的 Javascript 非常简单，只有 1 个函数。如果我删除 import 和 export 语句以使其成为普通 js 并将其包含在 <script> 标签中，它会起作用

import {cytoscape} from "cytoscape";

export function networkMap() {
// TODO
    var createNetworkType = function (id, color, description) {
        return {
            "id": id,
            "label": color.charAt(0).toUpperCase() + color.slice(1).toLowerCase(),
            "description": description,
            "className": color.toLowerCase()
        }
...

但是，当我使用 webpack 4 对其进行 webpack 并将生成的脚本包含在 <script> 标签中时，我得到：

TypeError: "Object(...) is not a function"

这是导致它的原因 - 它是 webpack 生成代码的一部分：

scope.cytoscape = Object(cytoscape__WEBPACK_IMPORTED_MODULE_0__["cytoscape"])({
                container: scope.container,
                elements: scope.elements,
                style: scope.style,
                layout: scope.layout
            });

如何配置 webpack 以简单地创建一个可以包含在脚本标签中的 Javascript 文件？

【问题讨论】：

标签： javascript webpack webpack-4

【解决方案1】：

此答案并未解决 OP 的确切问题，但确实突出了相关错误的一个潜在原因。关于 Object(...) is not a function，我在使用带有 Webpack 的 CommonJS 模块时遇到了该错误当我导出函数调用的结果而不是对函数本身的引用时。以下是会导致此错误的代码示例。

模块.js

function Init() {
    // function body here...
}

exports.Init = Init();

main.js

import { Init } from 'module.js'
Init();

如果您将 module.js 中的导出更改为以下代码，则可以解决问题。

exports.Init = Init;

【讨论】：

【解决方案2】：

导出不应该是函数表达式。它应该是一个对象。

module.exports = {}

没有

module.exports = () => {}

我见过人们使用函数，但不使用函数表达式。

module.exports = function(env) {
    return {};
}

【讨论】：