上古卷轴5特技点代码:Webpack 5入口点

这不是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 输入文件。

什么控制入口点的路径?

1

我注意到package.json包含

  "main": "./out/extension.js",

并将此更改为

  "main": "./dist/extension.js",

似乎没有影响在扩展主机中运行。

碰撞版本并构建新的 VSIX,我们发现入口点路径现在是正确的,并且激活方法运行。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(658)
C4d摄影机:与摄影机平行的边界框(box parallel)
上一篇
C lisp:查找(c)lisp示例的迷你语言 即DSL
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(52条)