您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在Webpack中管理jQuery插件依赖性

在Webpack中管理jQuery插件依赖性

您已经混合了各种方法包括旧供应商模块。这是我要解决方法

大多数模块dist在其main字段中链接版本package.json。尽管这对于大多数开发人员很有用,但对于webpack而言,最好为src版本加上别名,因为webpack能够更好地优化依赖关系(例如,使用时DedupePlugin)。

// webpack.config.js

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

但是,在大多数情况下,该dist版本也可以正常工作。

大多数旧版模块都依赖于特定全局变量的存在,例如jQuery插件on $jQuery在这种情况下,您可以配置webpack,使其在var $ = require("jquery")每次遇到全局$标识符时都在前面。

var webpack = require("webpack");

    ...

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

一些旧模块依赖于this成为window对象。当模块在thisequals 的CommonJS上下文中执行时,这将成为问题module.exports在这种情况下,您可以this使用imports- loader覆盖。

运行npm i imports-loader --save-dev然后

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

imports-loader也可以用于手动注入各种变量。但是在大多数情况下,ProvidePlugin当涉及到隐式全局变量时,它会更有用。

有些模块支持不同的模块样式,例如AMD,CommonJS和legacy。但是,大多数情况下,它们首先检查define然后使用一些古怪的代码导出属性在这些情况下,通过设置可以帮助强制CommonJS路径define = false

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

如果您不关心全局变量,而只希望使用旧脚本,则也可以使用脚本加载器。它将在全局上下文中执行模块,就像您已通过<script>标签将其包括在内一样。

如果该模块没有AMD /CommonJS版本,并且要包含dist,则可以将此模块标记noParse。然后,webpack将仅包含模块而不对其进行解析,这可用于缩短构建时间。这意味着任何需要AST的功能(例如ProvidePlugin)都将无法使用。

module: {
    noParse: [
        /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
    ]
}
JS 2022/1/1 18:17:53 有361人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶