Browserify和jQuery DataTables擴展

Question

我有這個browserify墊片配置：

  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "datatables": "./node_modules/datatables/media/js/jquery.dataTables.js",
    "dt-bootstrap": "./source/vendors/js/dataTables.bootstrap.js",
    "dt-select": "./source/vendors/js/dataTables.select.js"
   },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
     },
    "datatables": {
      "exports": "DataTable",
      "depends": [
        "jquery:$"
      ]
     },
    "dt-bootstrap": {
      "depends": ["jquery:$", "datatables:DataTable"]
    },
    "dt-select": {
      "depends": ["jquery:jquery", "datatables:DataTable"]
    }
  },

當我嘗試：

import dtBootstrap from 'dt-bootstrap'

在browserify之后，它給瀏覽器帶來了以下錯誤：

Uncaught Error: Cannot find module 'jquery'

僅當我嘗試執行以下操作時，此錯誤才會出現：

import $ from 'jquery'
import bootstrap from 'bootstrap'
import DataTable from 'datatables'

// Include any of this modules gives error.
import dtBootstrap from 'dt-bootstrap'
import dtSelect from 'dt-select'

當我不使用它們並且僅使用它時，一切都會好的：

import $ from 'jquery'
import bootstrap from 'bootstrap'
import DataTable from 'datatables'

// No include no error.
//import dtBootstrap from 'dt-bootstrap'
//import dtSelect from 'dt-select'

他們使用DataTables庫中的工廠模式。

有人知道我做錯了什么嗎？ 我嘗試了許多配置，以包括DataTables Extensions依賴項。

Answer 1

我已經從datatables網站外部datatables.js文件生成了文件，並將其包含在供應商中。 然后在我的browserify-shim配置中使用它。 和所有的工作！

  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "datatables": "./source/vendors/js/datatables.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
 "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
     "jquery:jQuery"
   ]
  },
 "datatables": {
   "exports": "DataTable",
   "depends": [
     "jquery:$"
   ]
 }
},