[英]Is there are way to re-webapck npm package, using wasm which was webpacked ans use it for vscode plugin development?
First of all, I created the npm package which uses wasm converted from rust-lang using wasm-pack. 首先,我创建了npm软件包,该软件包使用wasm-pack将wasm从rust-lang转换为wasm。
https://www.npmjs.com/package/markdown_img_url_editor https://www.npmjs.com/package/markdown_img_url_editor
node_modules/markdown_img_url_editor
: node_modules/markdown_img_url_editor
:
Now, I want to re-webpack the package and use it. 现在,我想重新打包并使用它。
https://github.com/yumetodo/vscode-google-photos-uploader/tree/feat/follow_markdown_img_url_editor_breaking_change https://github.com/yumetodo/vscode-google-photos-uploader/tree/feat/follow_markdown_img_url_editor_breaking_change
However, currently, there are at least two problems. 但是,目前至少存在两个问题。
.wasm
was not copied to webpack dest directory .wasm
未复制到webpack dest目录
After manually copied .wasm
files, 手动复制.wasm
文件后,
on debug execution, TypeError: Cannot read property 'call' of undefined at __webpack_require__
error is occurred. 在调试执行时, 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)
How should I resolve these problems? 我应该如何解决这些问题?
webpack.config.js
: 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;
stop re-webpack and mark wasm package as externals. 停止重新打包webpack,并将wasm软件包标记为外部。 https://webpack.js.org/configuration/externals/ https://webpack.js.org/configuration/externals/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.