如何使用 WebPack 2 (jQuery & ddSlick) 导入插件

Question

我正在尝试使用 ASP.NET Core 2.0 和 Vue.js 创建 SP 应用程序。在那个过程中，我坚持导入/实现一些额外的插件。在我想将 ddSlick 添加到 JQuery 1.7.2 之前，这或多或少是直截了当的。

首先，我实现了 jQuery，但只实现了 v 3.3。我想添加额外的 v. 1.7.2。这是 ddSlick 正常工作所必需的。

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

import ddSlick from 'ddslick'
import Vue from 'vue'
import axios from 'axios'
import router from './router/index'
import store from './store'
import { sync } from 'vuex-router-sync'
import App from 'components/app-root'
import { FontAwesomeIcon } from './icons'

// Registration of global components
Vue.component('icon', FontAwesomeIcon)

Vue.prototype.$http = axios

sync(store, router)

const app = new Vue({
  store,
  router,
  ...App
})

export {
  app,
  router,
  store
}

我尝试使用 import ddSlick from 'ddslick' 但它返回错误

'Module not found: Error: `Can't resolve 'ddslick' in C:\Develop\someApp-app\someApp.Frontend\ClientApp'`

在控制台中我得到

Uncaught Error: Cannot find module "ddslick"

我使用 npm install 安装了额外的依赖项，你可以在这里看到

"dependencies": {
    "axios": "^0.15.3",
    "core-js": "^2.5.3",
    "detached-jquery-1.7.2": "^1.7.2",
    "ddslick": "^1.0.2",
    "vue": "^2.5.16",
    "vue-router": "^2.8.1",
    "vue-server-renderer": "^2.5.16",
    "vue-template-compiler": "^2.5.16",
    "vuex": "^2.5.0",
    "vuex-router-sync": "^4.3.2"
  }

感谢您的宝贵时间:)

SamBokai 建议创建 npm ls 来发布结果（只发布一部分） 我们可以看到 ddslick 已安装

 +-- postcss-modules-scope@1.1.0
| | +-- css-selector-tokenizer@0.7.0 deduped
| | `-- postcss@6.0.23
| |   +-- chalk@2.4.1
| |   | +-- ansi-styles@3.2.1
| |   | | `-- color-convert@1.9.2 deduped
| |   | +-- escape-string-regexp@1.0.5 deduped
| |   | `-- supports-color@5.4.0 deduped
| |   +-- source-map@0.6.1
| |   `-- supports-color@5.4.0
| |     `-- has-flag@3.0.0 deduped
| +-- postcss-modules-values@1.3.0
| | +-- icss-replace-symbols@1.1.0
| | `-- postcss@6.0.23
| |   +-- chalk@2.4.1
| |   | +-- ansi-styles@3.2.1
| |   | | `-- color-convert@1.9.2 deduped
| |   | +-- escape-string-regexp@1.0.5 deduped
| |   | `-- supports-color@5.4.0 deduped
| |   +-- source-map@0.6.1
| |   `-- supports-color@5.4.0
| |     `-- has-flag@3.0.0 deduped
| `-- source-list-map@0.1.8
+-- ddslick@1.0.2
| `-- jquery@2.2.4
+-- detached-jquery-1.7.2@1.7.2
+-- eslint@4.19.1
| +-- ajv@5.5.2
| | +-- co@4.6.0
| | +-- fast-deep-equal@1.1.0
| | +-- fast-json-stable-stringify@2.0.0
| | `-- json-schema-traverse@0.3.1
| +-- babel-code-frame@6.26.0 deduped
| +-- chalk@2.4.1

1. 更新

这是我的文件夹结构的截图

Answer 1

其他项目，使用其他路径导入：

import '../lib/jquery.ddslick.js';

参考文献：

https://github.com/binary-com/webtrader-charts/blob/545f5350074d3933346bddb6b04618f49d1b439c/src/common/rivetsExtra.js#L6

https://github.com/rodergstep/cleaning/blob/7eb5f0c2daed7e49ea327af1e7af0b476b9eefb0/src/js/app.js#L1