4

私は反応プロジェクトでUikitを使用し、.lessをインポートすることに成功しましたが、インポートuikit.jsでresolve:{...}問題が発生し、に変更し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 に答える