Bootstrap 在DefinePlugin使用的情况下,如何在Webpack中为eslint定义变量

2nc8po8w  于 2023-03-27  发布在  Bootstrap
关注(0)|答案(2)|浏览(134)

我正在使用Webpack 2和Bootstrap 4。
我提供了一些全局变量,它为我工作,但当我尝试使用eslint时,它向我显示:* 非未定义错误 *
这是因为我没有导入变量。
但是如果它是全局的,我该怎么做呢?下面的代码工作正常,只是在eslint.provid.plugin上失败了

new webpack.ProvidePlugin({
    jQuery : "jquery",
    $ : "jquery",
    jquery : "jquery",
    Tether: "tether",
    "window.Tether": "tether",
    Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
    Button: "exports-loader?Button!bootstrap/js/dist/button",
    Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
    Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
    Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
    Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
    Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
    Util: "exports-loader?Util!bootstrap/js/dist/util",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal"
})

这是我的代码

console.log(Modal);

setTimeout(() => {
    const a = new Modal($("#myModal")[0]);
    console.log(a);
    a.show();
}, 2000);

我试着为Modal创建一个别名,但它不起作用
webpack.conf

alias: {
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
}

component.js

import Modal from "Modal";
    import $ from "jquery";
    console.log(Modal);

setTimeout(() => {
    const a = new Modal($("#myModal")[0]);
    console.log(a);
    a.show();
}, 2000);
pdsfdshx

pdsfdshx1#

eslint不知道任何通过webpack全局可用的变量。您应该在每个文件中通过在第一行/* global var1, var2 */中定义任何全局变量来指定它们,或者更好地使用.eslintrc文件来定义它们。另请参阅文档中的解释。

eqzww0vc

eqzww0vc2#

来到这个问题,因为vscode没有检测webpack定义的全局定义与definePlugin,解决方案与.eslintrc.js根据eslint文档

使用配置文件

要在配置文件中配置全局变量,请将globals配置属性设置为包含要使用的每个全局变量的键的对象。对于每个全局变量键,将相应的值设置为“writable”以允许覆盖该变量,或设置为“readonly”以禁止覆盖该变量。例如:

{
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}

相关问题