如何防止 jquery 使用 webpack 和 typescript 导入两次？

Posted 2023-03-13

【中文标题】如何防止 jquery 使用 webpack 和 typescript 导入两次？

【英文标题】：How to prevent jquery from importing twice with webpack & typescript?

【发布时间】：2018-05-17 07:03:36

【问题描述】：

我收到了这个错误

Uncaught TypeError: $(...).dialog is not a function

原因似乎是因为我两次导入 jquery。我找不到解决这个问题的方法。

这是我的完整错误，其中提到了引导程序。

PopupSelectCard.ts:44 Uncaught TypeError: $(...).dialog is not a function
    at Object.PopupSelectCard (PopupSelectCard.ts:44)
    at Object.defineProperty.value (Index.ts:21)
    at __webpack_require__ (bootstrap 92cf533…:19)
    at Object.defineProperty.value (bootstrap 92cf533…:62)
    at bootstrap 92cf533…:62
PopupSelectCard @   PopupSelectCard.ts:44
Object.defineProperty.value @   Index.ts:21
__webpack_require__ @   bootstrap 92cf533…:19
Object.defineProperty.value @   bootstrap 92cf533…:62
(anonymous) @   bootstrap 92cf533…:62

这是我的 webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = 
    context: __dirname,//another dir +"/app"
    // devtool: debug ? "inline-sourcemap" : null,

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    entry: "./code/client/scripts/Index.ts",
    output: 
        path: __dirname + "/code/client/views",
        filename: "scripts.min.js"
    ,
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(mangle: false, sourcemap: false),
        new webpack.IgnorePlugin(/fs/),
    ],
    node: 
        fs: 'empty',
        child_process: 'empty',
    ,

    resolve: 
        // Add '.ts' and '.tsx' as resolvable extensions.
        alias: 
            vue: 'vue/dist/vue.esm.js'
        ,
        extensions: [".ts", ".tsx", ".js", ".json"]
    ,

    module: 
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
             test: /\.tsx?$/, loader: "awesome-typescript-loader" ,

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
             enforce: "pre", test: /\.js$/, loader: "source-map-loader" 
        ]
    ,
;

这就是我在 ts 文件中导入的方式

import * as $ from "jquery";
import 'jquery-ui';

如果我不导入 jquery，我会收到编译器错误。

Cannot find name '$'.

我该如何解决这个问题？

【问题讨论】：

您可以在您的webpack.config 中添加jquery 作为插件吗？ IE。 new webpack.ProvidePlugin(jQuery: 'jquery', $: 'jquery',jquery: 'jquery')

@nbokmans 发生同样的问题。

是什么让您认为您要导入两次？如果你的 html 中有一个单独的 <script> 标签来加载 jquery，请将其删除并让 webpack 处理它

我没有脚本。所以问题是据我了解，我有一个全局 jquery，但 webstorm 看不到它。当我导入 jquery webstorm 时可以看到它，但是这次在浏览器上运行时会出现上述错误。当我使用上述插件时，从技术上讲它应该可以工作，但它没有。这就是我感到困惑的地方。

【参考方案1】：

所以我不得不做几件事。

首先npm install jquery-ui 命令不会以可用的方式安装 jquery-ui。它需要编译。所以我改用npm install jquery-ui-dist。

其次，仅导入文件不起作用。我需要所有使用 jqueryui 的 .ts 文件中的参考路径

///<reference path="../../../../node_modules/@types/jqueryui/index.d.ts"/>
import * as $ from "jquery";
import 'jquery-ui';

第三：我将以下代码添加到我的 webpack.config.ts 文件中。

var webpack = require('webpack');

module.exports = 
    ...
    plugins: debug ? [] : [
        new webpack.ProvidePlugin(
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        )
    ],
    resolve: 
        alias: 
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        
    
    ...
;

我还添加了打字npm install @types/jquery & npm install @types/jqueryui

我不确定是哪一部分出了问题，我在不同版本中做了几次，直到它起作用。因此，如果有人想编辑我的答案以澄清每个部分，请成为我的客人。