webpack-dev-server – 在webpack配置错误中导入uikit框架“UI.$不是函数”

2023年5月20日 240次阅读

我在反应项目中使用
Uikit成功导入.无解决：{…}但是在导入uikit.js时发出问题而我改为导入 – 载荷是它是一样的

在webpack.config.js文件中

...
...
,
resolve: {
    root: [
        path.join(__dirname, 'theme/js'),
        path.join(__dirname, 'theme/less'),
        path.join(__dirname, 'theme/img'),
        path.join(__dirname, 'theme/timeline')
    ],
    extensions: ['','.js','.less','.jpg','.png','.svg']
},
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery"
    })
],
module:{
    loaders:[
        {
            test:/\.js$/,
            loader:'babel',
            exclude:[nodeModulesPath],
            query: {presets: ['es2015', 'react']}
        },
        {
            test: /\.(eof|eot|ttf|woff(2)?)(\?[a-z0-9]+)?$/,
            loader: "url-loader?name=./bin/font/[name]-[hash].[ext]"
        },
        {
            test: /\.(png|jpg|svg)?$/,
            loader: "url-loader?limit=30000&name=./bin/img/[name]-[hash].[ext]"
        },
        {
            test: /\.(less|css)?$/,
            loader: 'style!css!less'
        }
    ]
},

并在文件中调用

import 'gradient/uikit' <-- work !
import $from 'jquery' <--- work !
import 'uikit.js' <--- issue "UI.$is not a function"

有什么办法吗？请

最佳答案 5个选项：

1(这很好)

这对我来说没有UI.$issue：

global.jQuery = require('jquery')
global.$= global.jQuery
require('uikit')
window.UIkit.offcanvas.show('#sidebar')

2(不适合我)

在main.js文件中添加以下内容：

import $from 'jquery'
import jQuery from 'jquery'
window.$= $
window.jQuery = jQuery

这必须在’uikit’行导入UIkit之前执行.因此,在导入可能使用uikit的任何组件之前添加此项.

3(不适合我)

您也可以尝试新的npm模块uikit-loader：https://www.npmjs.com/package/uikit-loader

4(不适合我)

您也可以尝试将此添加到您的webpack配置文件中：

var webpack = require('webpack')

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

5(不适合我)

你可以试试webpack imports-loader：https://www.npmjs.com/package/imports-loader

点赞