.net - Webpack 4 中与本地 js 文件(第三方库)捆绑的问题

Question

我很难尝试让 Webpack 4 配置正常工作。首先，我没有在 Node.js 服务器上运行；我在 IIS 上使用 .Net MVC。我如何才能在我的 webpack 配置文件中加载本地 js 文件？

这是我的 webpack.config.js 的样子:

const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        'ICC.js':
        [
            path.resolve(__dirname, 'Scripts/dependencies.js'),
            path.resolve(__dirname, 'Scripts/ICC/Helpers.js'),
            path.resolve(__dirname, 'Scripts/ICC/Layout.js'),
            path.resolve(__dirname, 'Scripts/ICC/ICC_Chart.js'),
            path.resolve(__dirname, 'Scripts/ICC/AddModDel.js'),
            path.resolve(__dirname, 'Scripts/Cache/CacheClientTemplate.js'),
            path.resolve(__dirname, 'Scripts/ICC/Menu_ICC.js'),
            path.resolve(__dirname, 'Scripts/ICC/ICCObjetLie.js'),
            path.resolve(__dirname, 'Scripts/Observable/observable.js'),
            path.resolve(__dirname, 'Scripts/Soumission/produitLigne.js'),
            path.resolve(__dirname, 'Scripts/Soumission/soumission.js'),
            path.resolve(__dirname, 'Scripts/Soumission/livraison.js'),
            path.resolve(__dirname, 'Scripts/Soumission/transport.js'),
            path.resolve(__dirname, 'Scripts/Soumission/termes.js'),
            path.resolve(__dirname, 'Scripts/Soumission/contacts.js'),
            path.resolve(__dirname, 'Scripts/Soumission/Recherche/minicart.js'),
            path.resolve(__dirname, 'Scripts/Soumission/Recherche/produitRecherche.js'),
            path.resolve(__dirname, 'Scripts/Content/content.js'),
            path.resolve(__dirname, 'Scripts/Opportunite/competiteur.js'),
            path.resolve(__dirname, 'Scripts/Cookie/cookie.js')
        ]
    },
    devtool: "source-map",
    output: {
        filename: '[name]',
        path: path.resolve(__dirname, './dist/scripts')
    },
    module: {
        rules:
        [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                parser: {
                    amd: false, // disable AMD
                    commonjs: false // disable CommonJS
                }
            }
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/\.min\.js$/gi]
        })]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    plugins: [
        new CleanWebpackPlugin(['./dist'])
    ]
};

在我的 dependencies.js 中，我有以下内容:

function loaddependencies(scripts) {
    for (var i = 0, len = scripts.length; i < len; i++) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = scripts[i];
        var x = document.getElementsByTagName('head')[0];
        x.appendChild(s);
    }
}

var dependencies =
    [
        "~/Scripts/jquery/jquery.min.js",
        "~/Scripts/cldr/cldr.js",
        "~/Scripts/cldr/event.js",
        "~/Scripts/cldr/supplemental.js",
        "~/Scripts/globalize/globalize.js",
        "~/Scripts/globalize/message.js",
        "~/Scripts/globalize/number.js",
        "~/Scripts/globalize/currency.js",
        "~/Scripts/globalize/date.js",
        "~/Scripts/bootstrap/bootstrap.min.js",
        "~/Scripts/splitter/jquery.splitter.js",
        "~/Scripts/jquery/jquery.timeago.js",
        "~/Scripts/jquery.signalR.min.js",
        "~/Scripts/lightbox/js/lightbox.min.js",
        "~/Scripts/toolbar/jquery.toolbar.js",
        "~/Scripts/dx.all.js",
        "~/Scripts/devextreme/dx.aspnet.data.js",
        "~/Scripts/devextreme/dx.aspnet.mvc.js",
        "~/Scripts/devextreme/localisation/dx.messages.frca.js"
    ];

loaddependencies(dependencies);

在此之前我尝试过很多解决方案，例如包括提供程序插件以在全局范围内公开 jquery:

 new webpack.ProvidePlugin({ 
        $: 'jquery', 
        jQuery: 'jquery'
      }) 

与

test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]

但这给了我以下错误:“未定义要求。” (这很正常，因为我不在 Node 环境中)。我也添加了

externals: {
    jquery: 'jQuery'
  }

那没用。我还尝试了以下 SO question 的解决方案(解决方案 3、4、5)。都失败了!我已经这样做了好几个星期了，但我似乎已经用完了解决方案。我他妈的必须做什么才能让它发挥作用？

Answer 1

好吧，在使用 Webpack 数周之后，我终于找到了解决方案。

基本上我必须将它分解成 4 个 typescript 文件；每个都包含要导入的所有必要的本地 js 脚本。在一个只包含 jQuery 的文件上，我必须执行以下操作:

import "expose-loader?$!jquery";
import "expose-loader?jQuery!jquery";

然后所有其他 typescript 文件都包含本地 js 文件的导入语句。

我的 webpack.config.js 文件如下所示:

const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const mainScripts = {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/main.ts'),
    devtool: "source-map",
    output: {
        filename: 'mainScripts .js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules:
        [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            },
            {
                parser: {
                    amd: false
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['./dist'])
    ],
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/\.min\.js$/gi]
        })]
    },
};

const scriptDependencies = {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/dependencies.ts'),
    output: {
        filename: 'scriptDependencies.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: ['.ts', '.js'],
        alias: {
            Globalize$: path.resolve(__dirname, "Scripts/globalize/globalize.js"),
            Globalize: path.resolve(__dirname, "Scripts/globalize/globalize"),
            cldr$: path.resolve(__dirname, "Scripts/cldr/cldr.js"),
            cldr: path.resolve(__dirname, "Scripts/cldr/cldr")
        }
    },
    module:
    {
        rules:
            [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: require.resolve('globalize'),
                    use: [{
                        loader: 'expose-loader',
                        options: 'Globalize'
                    }]
                },
                {
                    parser: {
                        amd: false
                    }
                }
            ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            Globalize: 'Globalize'
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/\.min\.js$/gi]
        })]
    },
};

const scriptDevExt = {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/devext.ts'),
    output: {
        filename: 'scriptDevExt.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: ['.js'],
    },
    module:
    {
        rules:
        [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                parser: {
                    amd: false
                }
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/\.min\.js$/gi]
        })]
    },
};


const jqueryDep= {
    mode: 'development',
    entry: path.resolve('./Scripts/tsScripts/jqueryDependency.ts'),
    output: {
        filename: 'jqueryDep.js',
        path: path.resolve(__dirname, './dist/scripts')
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"],
        alias: {
            jquery: path.resolve('./Scripts/jquery/jquery.min.js')
        }
    },
    module: {
        rules:
            [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader'
                },
                {
                    test: require.resolve('jquery'),
                    use: [{
                        loader: 'expose-loader',
                        options: 'jQuery'
                    }, {
                        loader: 'expose-loader',
                        options: '$'
                    }]
                },
                {
                    parser: {
                        amd: false
                    }
                }
            ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            "window.jQuery": 'jquery'
        })
    ],
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            },
            sourceMap: true,
            exclude: [/\.min\.js$/gi]
        })]
    },
};

module.exports = [jqueryDep, scriptDependencies, scriptDevExt , mainScripts ];

它终于可以正常工作了。