Browserify 和 jQuery DataTables 扩展

Question

我有这个 browserify shim 配置：

  "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.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:$"
   ]
 }
},

Browserify 和 jQuery DataTables 扩展

Browserify and jQuery DataTables Extensions

javascript

jquery

datatables

ecmascript-6

browserify