Quản lý phụ thuộc plugin jQuery trong gói webpack

Tôi đang sử dụng Webpack trong ứng dụng của mình, trong đó tôi tạo hai điểm nhập - bundle.js cho tất cả các tệp / mã JavaScript của mình và nhà cung cấp.js cho tất cả các thư viện như jQuery và React. Tôi phải làm gì để sử dụng các plugin có jQuery làm phụ thuộc của chúng và tôi muốn có chúng trong nhà cung cấp? Điều gì xảy ra nếu các plugin đó có nhiều phụ thuộc?

Hiện tại tôi đang cố gắng sử dụng plugin jQuery này tại đây - https://github.com/mbklein/jquery-elastic . Tài liệu Webpack đề cập đến cung cấpPlugin và trình tải nhập. Tôi đã sử dụng cung cấpPlPlugin, nhưng vẫn không có đối tượng jQuery. Đây là cách webpack.config.js của tôi trông như thế nào-

var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';

var config = {
    addVendor: function (name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path));
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jquery: "jQuery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
    ],
    entry: {
        app: ['./public/js/main.js'],
        vendors: ['react','jquery']
    },
    resolve: {
        alias: {
            'jquery': node_dir + '/jquery/dist/jquery.js',
            'jquery.elastic': lib_dir + '/jquery.elastic.source.js'
        }
    },
    output: {
        path: './public/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'jsx-loader' },
            { test: /\.jquery.elastic.js$/, loader: 'imports-loader' }
        ]
    }
};
config.addVendor('react', bower_dir + '/react/react.min.js');
config.addVendor('jquery', node_dir + '/jquery/dist/jquery.js');
config.addVendor('jquery.elastic', lib_dir +'/jquery.elastic.source.js');

module.exports = config;

Nhưng mặc dù vậy, nó vẫn gây ra lỗi trong bảng điều khiển trình duyệt:

Uncaught ReferenceError: jQuery không được xác định

Tương tự, khi tôi sử dụng trình tải nhập, nó sẽ báo lỗi,

yêu cầu không được xác định '

trong dòng này:

var jQuery = require("jquery")

Tuy nhiên, tôi có thể sử dụng cùng một plugin khi tôi không thêm nó vào tệp nhà cung cấp của mình và thay vào đó yêu cầu nó theo cách AMD thông thường như cách tôi bao gồm các tệp mã JavaScript khác của mình, như-

define(
[
    'jquery',
    'react',
    '../../common-functions',
    '../../libs/jquery.elastic.source'
],function($,React,commonFunctions){
    $("#myInput").elastic() //It works

});

Nhưng đây không phải là điều tôi muốn làm, vì điều này có nghĩa là jquery.elastic.source.js được gói cùng với mã JavaScript của tôi trong bundle.js và tôi muốn tất cả các trình cắm jQuery của mình nằm trong gói nhà cung cấp. Vì vậy, làm thế nào để tôi đạt được điều này?

Bạn đã pha trộn các cách tiếp cận khác nhau làm thế nào để bao gồm các mô-đun nhà cung cấp cũ. Đây là cách tôi giải quyết nó:

1. Thích CommonJS / AMD chưa hoàn thành hơn dist

Hầu hết các mô-đun liên kết distphiên bản trong mainlĩnh vực của họ package.json. Mặc dù điều này hữu ích cho hầu hết các nhà phát triển, nhưng đối với webpack thì tốt hơn là đặt bí danh cho srcphiên bản vì cách này webpack có thể tối ưu hóa các phụ thuộc tốt hơn (ví dụ như khi sử dụng DedupePlugin).

// webpack.config.js

module.exports = {
    ...
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

Tuy nhiên, trong hầu hết các trường hợp, distphiên bản cũng hoạt động tốt.

2. Sử dụng ProvidePluginđể tiêm toàn cầu ngầm

Hầu hết các mô-đun kế thừa đều dựa vào sự hiện diện của các quả cầu cụ thể, như các plugin jQuery làm trên $hoặc jQuery. Trong kịch bản này, bạn có thể định cấu hình gói web, để trả trước var $ = require("jquery")mỗi khi nó gặp mã $định danh toàn cầu .

var webpack = require("webpack");

    ...

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

3. Sử dụng trình tải nhập để định cấu hìnhthis

Một số mô-đun kế thừa dựa trên thisviệc là windowđối tượng. Điều này trở thành một vấn đề khi mô-đun được thực thi trong bối cảnh CommonJS trong đó thisbằng module.exports. Trong trường hợp này, bạn có thể ghi đè thisbằng trình tải nhập .

Chạy npm i imports-loader --save-devrồi

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

Trình tải nhập khẩu cũng có thể được sử dụng để chèn thủ công các biến. Nhưng hầu hết thời gian ProvidePluginlà hữu ích hơn khi nói đến toàn cầu ngầm.

4. Sử dụng trình tải nhập để tắt AMD

Có các mô-đun hỗ trợ các kiểu mô-đun khác nhau, như AMD, CommonJS và di sản. Tuy nhiên, hầu hết thời gian đầu tiên họ kiểm tra definevà sau đó sử dụng một số mã kỳ quặc để xuất các thuộc tính. Trong những trường hợp này, nó có thể giúp buộc đường dẫn CommonJS bằng cách cài đặt define = false.

module: {
    loaders: [
        {
            test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

5. Sử dụng trình tải tập lệnh để nhập tập lệnh toàn cầu

Nếu bạn không quan tâm đến các biến toàn cục và chỉ muốn các tập lệnh kế thừa hoạt động, bạn cũng có thể sử dụng trình tải tập lệnh. Nó thực thi mô-đun trong bối cảnh toàn cầu, giống như bạn đã đưa chúng qua <script>thẻ.

6. Sử dụng noParseđể bao gồm các dists lớn

Khi không có phiên bản AMD / CommonJS của mô-đun và bạn muốn bao gồm dist, bạn có thể gắn cờ mô-đun này là noParse. Sau đó, webpack sẽ chỉ bao gồm các mô-đun mà không phân tích cú pháp, có thể được sử dụng để cải thiện thời gian xây dựng. Điều này có nghĩa là bất kỳ tính năng nào yêu cầu AST , như ProvidePlugin, sẽ không hoạt động.

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}

Để truy cập toàn cầu vào jquery thì một số tùy chọn tồn tại. Trong dự án webpack gần đây nhất của tôi, tôi muốn truy cập toàn cầu vào jquery vì vậy tôi đã thêm các phần sau vào khai báo bổ trợ của mình:

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

Điều này có nghĩa là jquery có thể truy cập được từ bên trong mã nguồn JavaScript thông qua các tham chiếu toàn cầu $ và jQuery.

Tất nhiên, bạn cũng cần phải cài đặt jquery qua npm:

$ npm i jquery --save

Để có một ví dụ hoạt động của phương pháp này, xin vui lòng rẽ nhánh ứng dụng của tôi trên github

Tôi không biết nếu tôi hiểu rất rõ những gì bạn đang cố gắng làm, nhưng tôi đã phải sử dụng các plugin jQuery yêu cầu jQuery phải ở trong bối cảnh toàn cầu (cửa sổ) và tôi đặt những điều sau đây vào entry.js:

var $ = require('jquery');
window.jQuery = $;
window.$ = $;

Tôi chỉ cần yêu cầu bất cứ nơi nào tôi muốn jqueryplugin.min.jsvà window.$được mở rộng với plugin như mong đợi.

Tôi đã làm mọi thứ hoạt động tốt trong khi phơi bày $và jQuerynhư các biến toàn cục với Webpack 3.8.1 và sau đây.

Cài đặt jQuery như một phụ thuộc dự án. Bạn có thể bỏ qua @3.2.1để cài đặt phiên bản mới nhất hoặc chỉ định phiên bản khác.

npm install --save jquery@3.2.1

Cài đặt expose-loadernhư một phụ thuộc phát triển nếu chưa được cài đặt.

npm install expose-loader --save-dev

Cấu hình Webpack để tải và hiển thị jQuery cho chúng tôi.

// webpack.config.js
const webpack = require('webpack')

module.exports = {
  entry: [
    // entry bits
  ],
  output: {
    // output bits
  },
  module: {
    rules: [
      // any other rules
      {
        // Exposes jQuery for use outside Webpack build
        test: require.resolve('jquery'),
        use: [{
          loader: 'expose-loader',
          options: 'jQuery'
        },{
          loader: 'expose-loader',
          options: '$'
        }]
      }
    ]
  },
  plugins: [
    // Provides jQuery for other JS bundled with Webpack
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
}

Thêm phần này vào mảng plugin của bạn trong webpack.config.js

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

sau đó yêu cầu jquery bình thường

require('jquery');

Nếu nỗi đau vẫn còn để các kịch bản khác nhìn thấy nó, hãy thử đặt nó một cách rõ ràng trong bối cảnh toàn cầu thông qua (trong mục js)

window.$ = jQuery;

Trong tệp webpack.config.js của bạn thêm vào bên dưới:

 var webpack = require("webpack");
 plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
 ],

Cài đặt jQuery bằng npm:

$ npm i jquery --save

Trong tệp app.js thêm dòng dưới đây:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

Điều này làm việc cho tôi. :)

Tôi đã thử một số câu trả lời được cung cấp nhưng dường như không có câu trả lời nào hoạt động. Sau đó, tôi đã thử điều này:

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

Có vẻ như hoạt động cho dù tôi đang sử dụng phiên bản nào

Điều này hoạt động trong webpack 3:

trong tệp webpack.config.babel.js:

resolve: {
    alias: {
         jquery: "jquery/src/jquery"
    },
 ....
}

Và sử dụng ProvPlugin

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

Giải pháp tốt nhất tôi tìm thấy là:

https://github.com/angular/angular-cli/issues/5139#issuecomment-283634059

Về cơ bản, bạn cần bao gồm một biến giả trên typings.d.ts, xóa mọi "nhập * dưới dạng $ từ 'jquery" khỏi mã của bạn, sau đó thêm một thẻ vào tập lệnh jQuery vào html html của bạn theo cách thủ công. Theo cách này, webpack sẽ không theo cách của bạn và bạn sẽ có thể truy cập cùng một biến jQuery toàn cầu trong tất cả các tập lệnh của mình.

Điều này hoạt động với tôi trên webpack.config.js

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

trong một javascript khác hoặc vào HTML thêm:

global.jQuery = require('jquery');

Chỉnh sửa: Đôi khi bạn muốn sử dụng gói web đơn giản như một gói mô-đun cho một dự án web đơn giản - để giữ cho mã của riêng bạn được tổ chức. Giải pháp sau đây dành cho những người chỉ muốn một thư viện bên ngoài hoạt động như mong đợi bên trong các mô-đun của họ - mà không cần sử dụng nhiều thời gian để thiết lập webpack. (Đã chỉnh sửa sau -1)

Giải pháp nhanh chóng và đơn giản (es6) nếu bạn vẫn đang gặp khó khăn hoặc muốn tránh cấu hình bên ngoài / cấu hình plugin webpack bổ sung:

<script src="cdn/jquery.js"></script>
<script src="cdn/underscore.js"></script>
<script src="etc.js"></script>
<script src="bundle.js"></script>

bên trong một mô-đun:

const { jQuery: $, Underscore: _, etc } = window;