javascript - Angular/webpack 站点中未定义 jQuery

Question

嗨: 有人可以向我解释一下为什么jQuery没有定义？ 它是 vendor.js 的一部分文件(webpack)，并在 vendor.js 中被提及数百次，如* jQuery JavaScript Library v2.2.4所以它肯定已加载。

为什么 jquery-ui 看不到它是没有意义的，但我在 Angular 2 上已经经历了好几个星期的垃圾了。在过去(1 个月前)，你要确保在其余部分之前加载一个文件，然后您已被排序。

当然，如果包含“实际”，我可以让 2 个依赖项(UI 和 jasny)运行 <script>hardrive/bla/jquery.js在 _Layout.shtml ，但是如果 webpack 也将其包含在 vendor 文件中，那还有什么意义呢？

所有这些都是一个更大问题的一部分，让一个简单的旧东西

.animation = $({
    countNum: from
})

运行，我已经运行了两周了，它已经在 angularjs 中运行了。 WebPack 文件:

    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

    module.exports = (env) => {
        // Configuration in common to both client-side and server-side bundles
        const isDevBuild = !(env && env.prod);
        const sharedConfig = {
            stats: { modules: false },
            context: __dirname,
            resolve: { extensions: [ '.js', '.ts' ] },
            output: {
                filename: '[name].js',
                publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
            },
            module: {
                rules: [
                    { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                    { test: /\.html$/, use: 'html-loader?minimize=false' },
                    { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                     { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },

                    //{
                    //    test    : /\.(png|jpg|jpeg)$/,
                    //    include : path.join(__dirname, 'img'),
                    //    loader  : 'url-loader?limit=25000&name=images/[name].[ext]'
                    //},
                    //{test: /\.png$/, loader: 'file?name=images/[name].[ext]',},
                ]
            },
            plugins: [
                new CheckerPlugin(),
              new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
            ]


        };






        // Configuration for client-side bundle suitable for running in browsers
        const clientBundleOutputDir = './wwwroot/dist';
        const clientBundleConfig = merge(sharedConfig, {
            entry: { 'main-client': './ClientApp/boot-client.ts' },
            output: { path: path.join(__dirname, clientBundleOutputDir) },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./wwwroot/dist/vendor-manifest.json')
                })
            ].concat(isDevBuild ? [
                // Plugins that apply in development builds only
                new webpack.SourceMapDevToolPlugin({
                    filename: '[file].map', // Remove this line if you prefer inline source maps
                    moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
                })
            ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
        });

        // Configuration for server-side (prerendering) bundle suitable for running in Node
        const serverBundleConfig = merge(sharedConfig, {
            resolve: { mainFields: ['main'] },
            entry: { 'main-server': './ClientApp/boot-server.ts' },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./ClientApp/dist/vendor-manifest.json'),
                    sourceType: 'commonjs2',
                    name: './vendor'
                })
            ],
            output: {
                libraryTarget: 'commonjs',
                path: path.join(__dirname, './ClientApp/dist')
            },
            target: 'node',
            devtool: 'inline-source-map'
        });

        return [clientBundleConfig, serverBundleConfig];
    };

    const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');


module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');

    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        entry: {
            vendor: [
                '@angular/common',
                '@angular/compiler',
                '@angular/core',
                '@angular/http',
                '@angular/platform-browser',
                '@angular/platform-browser-dynamic',
                '@angular/router',
                '@angular/platform-server',
                'angular2-universal',
                'angular2-universal-polyfills',
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'es6-shim',
                'es6-promise',
                'event-source-polyfill',
                'jquery',
                'zone.js',
            ]
        },
        output: {
            publicPath: '/dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) },
                { test: require.resolve('jquery/jquery'), loader: 'expose?jQuery!expose?$' }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ]
        },
        entry: { vendor: ['aspnet-prerendering'] },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}

Answer 1

在Webpack配置中已经使用了jquery Provideplugin，如果没有使用这个

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