这不是VSCode extension runs from development but does not work when packaged using webpack的副本,尽管在使用开发人员工具查看实际错误之前,症状是相同的。
使用 webpack 打包 VSCode 扩展,创建一个包含我期望的文件的 dist 文件夹。
扩展工作在扩展主机中找到,但是当从生成的 VSIX 安装时,扩展激活方法不会被调用,尽管所有预期的文件都存在于C:\Users\Peter\.vscode\extensions\pdconsec.vscode-print-0.7.20
中
在 Visual Studio Code 中,“开发人员工具”窗格显示
Activating extension 'pdconsec.vscode-print' failed: Cannot find module
'c:\Users\Peter\.vscode\extensions\pdconsec.vscode-print-0.7.20\out\extension.js'
Require stack:
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\Peter\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js.
这是错误的路径。它应该读
'c:\Users\Peter\.vscode\extensions\pdconsec.vscode-print-0.7.20\dist\extension.js'
这似乎是一个配置问题。我希望在webpack.config.js
中找到罪魁祸首,但“out”不会出现在该文件中,除非作为“输出”的一部分。
//@ts-check
'use strict';
const path = require('path');
/**@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]",
},
devtool: 'source-map',
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: [{
// vscode-nls-dev loader:
// * rewrite nls-calls
loader: 'vscode-nls-dev/lib/webpack-loader',
options: {
}
}, {
test: /\.ts$/,
exclude: /node_modules/,
use: [{
loader: 'ts-loader',
options: {
compilerOptions: {
"module": "es6" // override `tsconfig.json` so that TypeScript emits native JavaScript modules.
}
}
}]
}]
},
}
module.exports = config;
正在查看https://code.visualstudio.com/api/working-with-extensions/bundling-extension
在上面的示例中,定义了以下内容:
目标是“节点”,因为扩展在 Node.js 上下文中运行。
入口点 webpack 应该使用。这类似于 package.json 中的 main 属性,只是您为 webpack 提供了一个“源”入口点,通常是 src / extension.ts,而不是“输出”入口点。webpack 器理解 TypeScript,因此单独的 TypeScript 编译步骤是多余的。
输出配置告诉 webpack 将生成的 bundle 文件放在哪里。按照惯例,那是 dist 文件夹。在这个示例中,webpack 将产生一个 dist / extension.js 文件。解析和模块 / 规则配置在那里支持 TypeScript 和 JavaScript 输入文件。
什么控制入口点的路径?
我注意到package.json
包含
"main": "./out/extension.js",
并将此更改为
"main": "./dist/extension.js",
似乎没有影响在扩展主机中运行。
碰撞版本并构建新的 VSIX,我们发现入口点路径现在是正确的,并且激活方法运行。
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(52条)