如何有效管理 jQuery 插件在 webpack 中的依赖？

javascript

2024-03-05 20:57:31

管理 jQuery 插件在 webpack 中的依赖

问题

在使用 Webpack 构建应用程序时，管理 jQuery 插件的依赖可能是一个挑战。为了优化性能并防止冲突，需要将插件的依赖项与主应用程序代码分开管理。

解决方案

webpack 提供了多种机制来解决 jQuery 插件依赖问题：

1. ProvidePlugin

ProvidePlugin 允许你在整个应用程序中提供全局变量。对于解决 jQuery 依赖非常有用：

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

2. imports-loader

imports-loader 用于加载依赖于其他模块的模块。对于 jQuery 插件：

{ test: /\.jquery.elastic.js$/, loader: 'imports-loader' }

3. webpack.config.js 配置

更新 webpack.config.js 文件：

plugins: [
  new webpack.ProvidePlugin({ ... }),
  new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
],
entry: {
  app: ['./public/js/main.js'],
  vendors: ['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?jQuery=jquery' }
  ]
}