4

我在反应项目中使用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"

有没有什么办法。请

4

1 回答 1

2

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

于 2016-05-25T05:34:56.550 回答