Tiếp xúc jQuery với đối tượng Window thực với Webpack

Tôi muốn hiển thị đối tượng jQuery với đối tượng cửa sổ chung có thể truy cập được bên trong bảng điều khiển dành cho nhà phát triển trong trình duyệt. Bây giờ trong cấu hình webpack của tôi, tôi có các dòng sau:

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

Những dòng này thêm các định nghĩa jQuery vào mỗi tệp trong mô-đun webpack của tôi. Nhưng khi tôi xây dựng dự án và cố gắng truy cập jQuery trong bảng điều khiển dành cho nhà phát triển như sau:

window.$;
window.jQuery;

nó nói rằng những thuộc tính này là không xác định ...

Có cách nào để sửa lỗi này?

Bạn cần sử dụng bộ tải tiếp xúc .

npm install expose-loader --save-dev

Bạn có thể làm điều này khi bạn yêu cầu:

require("expose?$!jquery");

hoặc bạn có thể làm điều này trong cấu hình của mình:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

CẬP NHẬT : Kể từ webpack 2, bạn cần sử dụng trình tải tiếp xúc thay vì hiển thị :

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

SupplyPlugin thay thế một biểu tượng trong một nguồn khác thông qua việc nhập tương ứng, nhưng không hiển thị biểu tượng trên không gian tên chung. Một ví dụ cổ điển là các plugin jQuery. Hầu hết chúng chỉ mong đợi jQueryđược xác định trên toàn cầu. Với câu lệnh, ProvidePluginbạn sẽ đảm bảo rằng jQuery là một phần phụ thuộc (ví dụ: đã được tải trước đó) và sự xuất hiện jQuerytrong mã của chúng sẽ được thay thế bằng phần thô của webpack require('jquery').

Nếu bạn có các tập lệnh bên ngoài dựa vào biểu tượng để nằm trong không gian tên chung (như giả sử JS được lưu trữ bên ngoài, các lệnh gọi Javascript trong Selenium hoặc đơn giản là truy cập vào biểu tượng trong bảng điều khiển của trình duyệt), bạn muốn sử dụng expose-loaderthay thế.

Nói ngắn gọn: Cung cấp quản lý thời gian xây dựng phụ thuộc vào các ký hiệu toàn cục trong khi expose-loaderquản lý thời gian chạy phụ thuộc vào các ký hiệu toàn cầu.

Có vẻ như windowđối tượng được hiển thị trong tất cả các mô-đun.

Tại sao không chỉ nhập / yêu cầu JQueryvà đặt:

window.$ = window.JQuery = JQuery;

Bạn sẽ cần đảm bảo rằng điều này xảy ra trước khi yêu cầu / nhập bất kỳ mô-đun nào sử dụng window.JQuery, trong mô-đun yêu cầu hoặc trong mô-đun nơi nó đang được sử dụng.

Điều này luôn luôn làm việc cho tôi. bao gồm cả webpack 3 window.$ = window.jQuery = require("jquery");

Không có điều nào ở trên phù hợp với tôi. (và tôi thực sự không thích cú pháp của trình tải tiếp xúc). Thay thế,

Tôi đã thêm vào webpack.config.js:

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

Hơn tất cả các mô-đun có quyền truy cập thông qua jQuery thông qua $.

Bạn có thể hiển thị nó trên cửa sổ bằng cách thêm phần sau vào bất kỳ mô-đun nào của bạn được gói bởi webpack:

window.$ = window.jQuery = $

Cập nhật cho Webpack v2

Cài đặt bộ tải tiếp xúc như Matt Derrick mô tả:

npm install expose-loader --save-dev

Sau đó, chèn đoạn mã sau vào webpack.config.js:

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(từ tài liệu của trình tải tiếp xúc )

Trong trường hợp của tôi hoạt động

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }