Power BI 自定义视觉对象 - 尝试加载 jquery 插件时 $ 不是函数

Question

在使用 Pbiviz 开发自定义 Power Bi 视觉对象时，什么可能导致 $ is not a function 错误？

当我想指定 jquery 插件时出现问题。看起来库顺序错误，但输出文件有正确的顺序。

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.7.0/PowerBI-visuals.d.ts",
    "src/settings.ts",
    "src/visual.ts",
    "node_modules/@types/jquery/index.d.ts",
    "node_modules/@types/datatables.net/index.d.ts",
    "node_modules/@types/lodash/index.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts"
  ]
}

pbiviz.json:

  "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/jquery/dist/jquery.js",
    "node_modules/datatables.net/js/jquery.dataTables.js",
    "node_modules/lodash/lodash.min.js"
  ],

package.json:

 "dependencies": {
    "@types/datatables.net": "^1.10.1",
    "@types/jquery": "^2.0.48",
    "@types/lodash": "^4.14.50",
    "datatables.net": "^1.10.15",
    "jquery": "^2.1.0",
    "lodash": "^4.17.4",
    "powerbi-visuals-utils-dataviewutils": "1.2.0"
  },

错误：

Uncaught TypeError: $ is not a function
    at <anonymous>:14820:21
    at <anonymous>:10387:3
    at Window.<anonymous> (<anonymous>:10390:1)
    at <anonymous>:25969:20
    at Object.r [as injectJsCode] (visualhostcore.min.js:2)
    at i.loadWithoutResourcePackage (visualsandbox.min.js:1)
    at i.executeMessage (visualsandbox.min.js:1)
    at i.onMessageReceived (visualsandbox.min.js:1)
    at visualsandbox.min.js:1
    at e.invokeHandler (visualhostcore.min.js:2)

Answer 1

问题出在沙箱中，所有自定义视觉效果都在沙箱中工作，其中 window 对象是假的 windows 对象。

尝试以下方式：

使用以下代码创建 js 文件：

var jQuery = typeof jQuery !== 'undefined'
    ? jQuery
    : window['$'];

并将此文件包含到 pbiviz.json 的 externalJS 部分。但是把行放在 "node_modules/jquery/dist/jquery.js", 和 "node_modules/datatables.net/js/jquery.dataTables.js", （所以，在 jquery 之后，但在 jquery 插件之前）

样本： https://github.com/Microsoft/powerbi-visuals-heatmap/blob/master/pbiviz.json#L24

Power BI 自定义视觉对象 - 尝试加载 jquery 插件时 $ 不是函数

Power BI custom visuals - $ is not a function when trying to load jquery plugins

jquery

datatables

npm

typescript

powerbi