Webpack加载jQuery插件时会加载自己的jQuery实例

Question

Webpack加载jQuery插件时会加载自己的jQuery实例

javascriptjqueryjquery-pluginswebpackjquery-terminal

6

我一直在尝试通过webpack加载一个jquery插件。这个插件被打包成npm模块，在它的依赖项中仅包含jquery。我认为webpack会加载那个实例的jquery，而不是使用我通过ProvidePlugin提供的全局jquery。我尝试了另一个stackoverflow帖子中提供的所有解决方案（Managing jQuery plugin dependency in webpack），但它们都没有起作用；结果总是相同的：“terminal() 不是一个函数”。如果我手动修改node_modules文件夹中的软件包，在package.json中删除jquery依赖项和下载到的插件文件夹中的依赖项，webpack就可以成功地将插件与全局jquery实例绑定。我知道，我可以简单地fork那个软件包并使用私有npm存储库，但我想使用官方软件包。

这是我的webpack配置：

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var moment = require('moment');
var path = require('path');
var environment = process.env.APP_ENVIRONMENT || 'dev';

module.exports = {

  entry: {
    'app': './src/main.ts',
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts'
  },
  /*devtool: 'source-map',*/
  output: {
    path: './dist',
    filename: '[name].browser.' + moment().format('DDMMYYYYHHmm') + '.js'
  },
  module: {
    loaders: [
      { test: /\.component.ts$/, loader: 'ts!angular2-template' },
      { test: /\.ts$/, exclude: /\.component.ts$/, loader: 'ts' },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.css$/, include: path.resolve('src/app'), loader: 'raw-loader' },
      {
        test: /\.css$/, exclude: path.resolve('src/app'), loader: ExtractTextPlugin.extract('style', 'css', {
          fallbackLoader: "style-loader",
          loader: "css-loader"
        })
      },
      { test: /\.(png|jpe?g|gif|ico)$/, loader: 'file?name=fonts/[name].[ext]' },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file?name=fonts/[name].[ext]" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]" },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.ts', '.html', '.css']
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor', 'polyfills']
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(environment),
        config: JSON.stringify(require('./profile/' + environment + ".profile.js"))
      }
    }),
    new CleanWebpackPlugin(
      ['dist']
    ),
    new CopyWebpackPlugin([
      { from: './src/images', to: 'images' }
    ]),
    new ExtractTextPlugin('[name].browser.css'),
    new webpack.optimize.UglifyJsPlugin({ minimize: true }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
};

这里是jquery.terminal的package.json文件：

{
  "_args": [
    [
      {
        "raw": "jquery.terminal@0.11.11",
        "scope": null,
        "escapedName": "jquery.terminal",
        "name": "jquery.terminal",
        "rawSpec": "0.11.11",
        "spec": "0.11.11",
        "type": "version"
      },
      "/home/giovanni/Projects/Private/site"
    ]
  ],
  "_from": "jquery.terminal@0.11.11",
  "_id": "jquery.terminal@0.11.11",
  "_inCache": true,
  "_installable": true,
  "_location": "/jquery.terminal",
  "_nodeVersion": "4.2.6",
  "_npmOperationalInternal": {
    "host": "packages-16-east.internal.npmjs.com",
    "tmp": "tmp/jquery.terminal-0.11.11.tgz_1475868856610_0.3736777463927865"
  },
  "_npmUser": {
    "name": "jcubic",
    "email": "jcubic@onet.pl"
  },
  "_npmVersion": "3.5.2",
  "_phantomChildren": {},
  "_requested": {
    "raw": "jquery.terminal@0.11.11",
    "scope": null,
    "escapedName": "jquery.terminal",
    "name": "jquery.terminal",
    "rawSpec": "0.11.11",
    "spec": "0.11.11",
    "type": "version"
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/jquery.terminal/-/jquery.terminal-0.11.11.tgz",
  "_shasum": "eaeed2f8f305ac0477d71ef492e7d98d6064d812",
  "_shrinkwrap": null,
  "_spec": "jquery.terminal@0.11.11",
  "_where": "/home/giovanni/Projects/Private/site",
  "author": {
    "name": "Jakub Jankiewicz",
    "email": "jcubic@onet.pl",
    "url": "http://jakub.jankiewi.cz"
  },
  "bugs": {
    "url": "https://github.com/jcubic/jquery.terminal/issues"
  },
  "dependencies": {
    "jquery": "^2.1.4"
  },
  "description": "jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications.",
  "devDependencies": {
    "istanbul": "^0.4.3",
    "jasmine": "^2.4.1",
    "jasmine-node": "^1.14.5",
    "jsdom": "^3.1.2"
  },
  "directories": {},
  "dist": {
    "shasum": "eaeed2f8f305ac0477d71ef492e7d98d6064d812",
    "tarball": "https://registry.npmjs.org/jquery.terminal/-/jquery.terminal-0.11.11.tgz"
  },
  "gitHead": "0f2e55a6501d96aa17d42e4fcc071fab906309d8",
  "homepage": "http://terminal.jcubic.pl",
  "keywords": [
    "terminal",
    "emulator",
    "prompt",
    "console",
    "keyboard",
    "type",
    "rpc",
    "input",
    "ui"
  ],
  "license": "MIT",
  "main": "js/jquery.terminal-0.11.11.js",
  "maintainers": [
    {
      "name": "jcubic",
      "email": "jcubic@onet.pl"
    }
  ],
  "name": "jquery.terminal",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jcubic/jquery.terminal.git"
  },
  "scripts": {},
  "version": "0.11.11"
}

- Giovanni Di Santo

3个回答

2

一种针对包管理器 yarn 的备选解决方案是强制使用主应用程序的库依赖项。通过在您的 package.json 中指定resolutions，可以防止下载不同版本的sub-dependencies，除了您的应用程序所需的之外。

如果您的软件包是公开再分发的，则不应使用此解决方案。

问题

例如，如果您的应用程序依赖于"jquery": "~1.12.0"和jquery-plugin，后者包括自己的dependencies: { "jquery": ">=1.9" }。假设最新版本的jquery是3.4.1，则运行yarn install将下载一个目录结构，如下所示：

node_modules
    jquery@1.12.4
    jquery-plugin
        node_modules
             jquery@3.4.1

//app.js
const $ = require('jquery');
require('jquery-plugin');
console.log(typeof $.fn.plugin); //undefined

解决方案：

在你的 package.json 文件中添加一个名为 "resolutions" 的字段，并定义你的版本覆盖。

package.json

强制所有子依赖项使用 jQuery ~1.12.0

{
    "name": "project-name",
     "dependencies": {
         "jquery": "~1.12.0",
         "jquery-plugin": "*"
     },
     "resolutions": {
         "jquery": "~1.12.0"
     }
}

或者强制使用jQuery ~1.12.0来使用jquery-plugin。

{
    "name": "project-name",
     "dependencies": {
         "jquery": "~1.12.0",
         "jquery-plugin": "*"
     },
     "resolutions": {
         "jquery-plugin/jquery": "~1.12.0"
     }
}

然后运行yarn install。 结果：重复的jquery子依赖项被移除。

node_modules
    jquery@1.12.4
    jquery-plugin

//app.js
const $ = require('jquery');
require('jquery-plugin');
console.log(typeof $.fn.plugin); //function

- Will B.

0

不熟悉jquery.terminal，但明确告诉插件如何加载jQuery可能会有所帮助。我为类似问题的几个插件做过这样的事情。

    loaders: [{
        test: /jquery.terminal.+\.(js)$/,
        loader: 'imports?jQuery=jquery,$=jquery,this=>window'
    }]

- Quotidian

谢谢您的回复@Quotidian，不过我已经解决了这个问题！我即将发布一个答案。 - Giovanni Di Santo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Giovanni Di Santo · Accepted Answer

11

通过略微修改我的Webpack配置，我解决了我的问题。正如这里建议的那样(Managing jQuery plugin dependency in webpack)，我添加了一个jquery别名。在提供的示例中，别名是静态指定的，但对我来说没有用。我切换到动态值，问题就解决了。

这是代码片段：

alias: {
      'jquery': path.resolve(path.join(__dirname, 'node_modules', 'jquery'))
     },

- Giovanni Di Santo

3

这是帮助我的东西。我使用jquery/src/jquery作为别名，但是一些旧的jQuery插件在它们的package.json中有依赖关系，而此别名匹配了错误的目录。例如：当插件将jQuery作为依赖项时，可能会出现some-jquery-plugin/node_modules/jquery/src/jquery这种情况。由于旧版的jQuery插件期望的jQuery版本为1.0.0之后的任何版本，而yarn/npm下载的是jQuery 3，因此我在vendor.js文件中有两个不同版本的jQuery，而我的项目需要更旧的版本1.12.4。 - Sams

在我的项目中使用三个 jQuery 插件（jquery-asScrollable、jquery-asScrollbar 和 jquery-asHoverScroll）时，我遇到了这个问题，而这个答案指引了我正确的方向。在我的情况下，静态别名 jquery: "jquery/src/jquery" 解决了我的问题。谢谢！ - aalbagarcia

非常感谢。我已经寻找这个指导超过一天了。我正在打包一个带有大量供应商依赖项和自己的gulp-webpack任务的第三方bootstrap 4主题。在注意到许多不一致的插件成功率之后 - 大多集中在jquery周围 - 我发现很难确定每个模块是否引用相同的jquery依赖项。这种技术立即为我工作。 - elight