如何使用 rollupjs 将 @mediapipe/face_mesh 模块注入到我的包中

Jac*_*how 6 javascript json closures typescript rollupjs

我是 Rollup 的新手,最近几天学到了很多东西。我正在使用 Rollup 制作一个依赖于 的模块@mediapipe/face_mesh,它作为(我认为?) IIFE 提供。我有兴趣将face_mesh注入到我的输出文件中,而不是将其作为外部依赖项包含在内。

我正在使用 commonjs 和 node-resolve 插件来注入它——除了一点之外,一切都正常。我对如何将脚本添加到输出 index.js 有一些奇怪的行为

包.json

"source": "src/index.ts",
"main": "dist/index.js",
"dependencies": {
    "@mediapipe/face_mesh": "0.4.1633559619"
}
Run Code Online (Sandbox Code Playgroud)

src/index.ts

import { FaceMesh } from '@mediapipe/face_mesh'

const faceMesh = new FaceMesh()
Run Code Online (Sandbox Code Playgroud)

rollup.config.js

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    }
  ],
  plugins: [
    typescript({
      typescript: require('typescript')
    }),
    commonjs({
      include: /\/node_modules\//
    }),
    nodeResolve({
      browser: true
    }),
    globals(),
    builtins()
  ]
}
Run Code Online (Sandbox Code Playgroud)

face_mesh.js

(function(){/*

 Copyright The Closure Library Authors.
 SPDX-License-Identifier: Apache-2.0
*/
var v;function aa(a){var b=0;return function(){
    /* a bunch of minified code */
}).call(this);
Run Code Online (Sandbox Code Playgroud)

dist/index.js(推出输出)

var face_mesh = {};

(function(){/*

 Copyright The Closure Library Authors.
 SPDX-License-Identifier: Apache-2.0
*/
var v;function aa(a){var b=0;return function(){
    /* a bunch of minified code */
}).call(commonjsGlobal);

...

const faceMesh = new face_mesh.FaceMesh()
Run Code Online (Sandbox Code Playgroud)

您可以看到node_resolve已将模块命名为“face_mesh”并为其设置了导出对象。但我相信 commonjs 会将其更改.call(this).call(commonjsGlobal).

当我运行这个模块时,我收到一个错误FaceMesh does not exist on type face_mesh

如果我将commonjsGlobal输出文件更改为face_mesh,那么它就可以工作。根据输出,我认为它应该是这样,但是“this”被认为是全局范围而不是模块。

我想我可以使用替换插件自动执行此更改作为最后一步,但这对我来说感觉很麻烦。我一直在寻找更好的方法。

有人知道如何处理这个问题吗?我做了很多搜索,但这似乎是一个不常见的问题。来自face_mesh的模块的结构似乎可能不常见,或者我对应该使用什么插件/工具来转译它有误解。