在 webpack 配置错误中导入 uikit 框架 "UI.$ is not a function"

Question

我在 React 项目中使用 Uikit 它成功导入 .less 和 resolve:{...} 但导入时出现问题 uikit.js和我改成imports-loadaer是一样的

在 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"

有什么办法吗。请

Answer 1

5 个选项：

1（效果很好）

这对我有用，没有 UI.$ 问题：

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

这必须在 import UIkit from '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

在 webpack 配置错误中导入 uikit 框架 "UI.$ is not a function"

Import uikit framework in webpack config error "UI.$ is not a function"

getuikit

webpack-dev-server

1（效果很好）

2（不适合我）

3（不适合我）

4（不适合我）

5（不适合我）