導入UIKit框架「UI。$不是一個函數」

Question

我使用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' 
     } 
    ] 
}, 

，並在文件中調用

​​

有什麼辦法。請

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（不是爲我工作）

你可以嘗試webpackimports-loader：https://www.npmjs.com/package/imports-loader