javascript - 有没有办法重新 webapck npm 包，使用 webpacked 的 wasm 并将其用于 vscode 插件开发？

Question

首先，我创建了使用 wasm 的 npm 包，该包使用 wasm-pack 从 rust-lang 转换而来。

https://www.npmjs.com/package/markdown_img_url_editor

node_modules/markdown_img_url_editor：

现在，我想重新 webpack 包并使用它。

https://github.com/yumetodo/vscode-google-photos-uploader/tree/feat/follow_markdown_img_url_editor_break_change

然而，目前至少存在两个问题。

.wasm未复制到 webpack dest 目录
手动复制.wasm文件后，在调试执行时，发生错误。

TypeError: Cannot read property 'call' of undefined at __webpack_require__

Activating extension `yumetodo.google-photos-uploader` failed:  Cannot read property 'call' of undefined
Here is the error stack:  TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:77:1)
    at Function.requireEnsure [as e] (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:96:25)
    at Module.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:229:1)
    at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:77:1)
    at c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:219:1
    at Object.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\node_modules\markdown_img_url_editor\dist\index.js:222:1)
    at Object../node_modules/markdown_img_url_editor/dist/index.js (c:\msys64\home\yumetodo\google-photos-uploader\dist\extension.js:248909:30)
    at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\webpack\bootstrap:19:1)
    at Object../src/extension.ts (c:\msys64\home\yumetodo\google-photos-uploader\src\extension.ts:5:1)
    at __webpack_require__ (c:\msys64\home\yumetodo\google-photos-uploader\webpack\bootstrap:19:1)
    at module.exports../node_modules/abort-controller/dist/abort-controller.js.Object.defineProperty.value (c:\msys64\home\yumetodo\google-photos-uploader\webpack\bootstrap:83:1)
    at Object.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\dist\extension.js:88:10)
    at Object.<anonymous> (c:\msys64\home\yumetodo\google-photos-uploader\dist\extension.js:285073:3)
    at Module.t._initNodeRequire.o._compile (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:15:840)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:704:10)
    at Module.load (internal/modules/cjs/loader.js:602:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
    at Function.Module._load (internal/modules/cjs/loader.js:533:3)
    at Function.t._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:785:588)
    at Function.define._installInterceptor.i._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:751:448)
    at Function.t.getExtensionPathIndex.then.n._load (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:742:925)
    at Module.require (internal/modules/cjs/loader.js:640:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Function.i [as __$__nodeRequire] (c:\Program Files\Microsoft VS Code\resources\app\out\vs\loader.js:32:381)
    at f._loadCommonJSModule (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:752:632)
    at f._doActivateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:655:27)
    at f._activateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:654:108)
    at f.<anonymous> (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:651:937)
    at Generator.next (<anonymous>)
    at i (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:14:83)
    at new Promise (<anonymous>)
    at i (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:13:862)
    at Object.actualActivateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:651:639)
    at p._activateExtension (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:497:21)
    at define._activateExtensions.r.length.Promise.all.s.map.e (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:496:628)
    at Array.map (<anonymous>)
    at p._activateExtensions (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:496:616)
    at p.activateByEvent (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:494:477)
    at f._activateByEvent (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:652:775)
    at A.$activateByEvent._readyToRunExtensions.wait.then.t (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\services\extensions\node\extensionHostProcess.js:661:547)

我应该如何解决这些问题？

webpack.config.js：

//@ts-check

'use strict';

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const TerserPlugin = require('terser-webpack-plugin');

/**@type {import('webpack').Configuration}*/
const config = {
  target: 'node', // vscode extensions run in a Node.js-context  -> https://webpack.js.org/configuration/node/

  entry: './src/extension.ts', // the entry point of this extension,  -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json),  -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, 'dist'),
    filename: 'extension.js',
    libraryTarget: 'commonjs2',
    devtoolModuleFilenameTemplate: '../[resource-path]',
    webassemblyModuleFilename: "[modulehash].wasm",
  },
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: false,
          keep_classnames: true,
          keep_fnames: true,
        },
      }),
    ],
  },
  externals: {
    vscode: 'commonjs vscode', // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed,  -> https://webpack.js.org/configuration/externals/
  },
  resolve: {
    // support reading TypeScript and JavaScript files,  -> https://github.com/TypeStrong/ts-loader
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            // options: {
            //   compilerOptions: {
            //     "module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
            //   }
            // }
          },
        ],
      },
      {
        test: /\.html$/,
        use: 'raw-loader',
      },
      {
        test: /\.wasm$/,
        type: 'webassembly/experimental',
      },
    ],
  },
};
module.exports = config;

score 0 · Accepted Answer

停止重新 webpack 并将 wasm 包标记为外部包。 https://webpack.js.org/configuration/externals/

javascript - 有没有办法重新 webapck npm 包，使用 webpacked 的 wasm 并将其用于 vscode 插件开发？

1 回答 1

Related

Reference