Browserify和jQuery DataTables扩展

debugcn 发表于 Dev

瓦莱

我有这个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依赖项。

瓦莱

我已经从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:$"
   ]
 }
},

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。