在混合应用程序（AngularJS - Angular）和 Webpack 中用 node_module 替换 <script src = jquery.js>

Question

我面临一个每个人都已经遇到过的问题，但是尽管提出了所有建议的解决方案，但没有一个能解决我的问题。

我们实际上有一个使用 Webpack4 和 ts-loader 的混合应用程序（AngularJS 和 Angular8）。我们使用标签加载了所有库，一切正常。

我的实际工作是删除这些脚本标签并设置 node_modules。 除 jquery 外，一切正常。

确实，在开发模式下，没关系，因为我使用 devtool : 'eval-source-map'，在这种情况下，到处都可以找到 jquery，但是当我想在生产模式下生成我的包文件而不使用源映射时，jquery已经找不到了。

而且使用源映射的事实使文件变得相当大。

这是我的 webpack 配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        app: path.join(__dirname, '/main.ts'),
        dashboard: path.join(__dirname, '/main.dashboard.ts'),
    },
    // devtool: 'eval-source-map',
    output: {
        filename: '[name].bundle.js',
        publicPath: "/dist",
        pathinfo: true,
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                }
            },
            {
                test: /\.css/i,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ]
    },
    plugins: [
        new webpack.ContextReplacementPlugin(
            /(.+)?angular(\/)core(.+)?/,
            path.join(__dirname, '/'), //location of src
            {} //a map of our routes
        ),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    resolve: {
        extensions: [".webpack.js", ".web.js", ".tsx", ".ts", ".js"]
    }
};

在我的 package.json 文件中：

"dependencies": {
...
    "jquery": "^3.1.0"
  },
"devDependencies": {
    "@types/jquery": "^3.3.31"
  },

任何帮助将不胜感激， 提前谢谢你，

Answer 1

将 jQuery 添加到 angular.json。找到属性“脚本”（你可能有不止一个）并添加

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

（或兼容，取决于 jQuery 的 dist 的实际路径）。