typescript - چگونه یک افزونه سرور زبان برای VScode را با کلاینت و سرور درون آن به درستی بستهبندی کنیم
من اولین افزونه vscode خود را ساختهام و در حال تلاش برای بستهبندی فایلهای جاوااسکریپت با استفاده از webpack هستم
اینها دستورالعملهایی هستند که من دنبال میکنم https://code.visualstudio.com/api/working-with-extensions/publishing-extension.
اما آن دستورالعملها برای یک برنامه واحد است که شامل out، src و node_modules در سطح بالا میباشد، افزونه Language Server شامل دو پوشه اصلی client و server است، هر کدام با پوشههای مخصوص به خود: src, out, node_modules
زمانی که vsce package را اجرا میکنم، این هشدار را دریافت میکنم
This extension consists of 413 files, out of which 122 are JavaScript files. For performance reasons, you should bundle your
extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore
DONE Packaged: D:\MAO\repos\Petrel-XML\petrel-xml-0.9.1.vsix (413 files, 416.32KB)
پس من از این .vscodeignore استفاده میکنم
.vscode
**/*.ts
**/*.map
out/**
node_modules/**
test_files/**
client/src/**
server/src/**
tsconfig.json
webpack.config.js
.gitignore
همچنین مستندات کمی قدیمی است در مورد webpack.config.js، بنابراین من مجبور شدم 'use strict' را داخل یک تابع با همه تنظیمات قرار دهم.
تنظیم entry مطابق نیازهای من تغییر داده شد
//@ts-check
(function () {
'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: './client/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',
clean: true, //clean the dist folder for each time webpack is run
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: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader'
}
]
}
]
}
};
module.exports = config;
}());
و در فایل package.json من این بخش را دارم.
"scripts": {
"vscode:prepublish": "webpack --mode production",
"webpack": "webpack --mode development",
"webpack-dev": "webpack --mode development --watch",
"test-compile": "tsc -p ./",
"compile": "tsc -b",
"watch": "tsc -b -w",
"postinstall": "cd client && npm install && cd ../server && npm install && cd ..",
"test": "sh ./scripts/e2e.sh"
},
حتی پس از انجام همه موارد بالا، بسته ایجاد میشود اما با همان پیام «هشدار عملکرد بستهبندی». من نیاز دارم بدانم چگونه آن را بهدرستی بستهبندی کنم تا آن پیام هشدار حذف شود و افزونه همچنان کار کند.
بهروزرسانی: مستندات فعلی مایکروسافت نحوه بستهبندی افزونههای کلاینت و سرور (افزونههای Language Server) را توضیح نمیدهند - مستندات فعلی درباره webpack برای افزونه «معمولی» اینجا است - https://code.visualstudio.com/api/working-with-extensions/bundling-extension - اینگونه انجام میشود
پاسخ شماره ۱
برای فهمیدن نحوه انجام آن، فقط مراحل بعدی را دنبال کنید:
- کلون کردن مخزن
vscode-yaml - دانلود بسته
vscode-yaml-*.vsix - بسته
vscode-yaml-*.vsixرا در یک پوشه باز کنید - مقایسه پیکربندی webpack در مخزن کلون شده با نتیجه در بسته باز شده
کلید اصلی: شما باید نقطه ورود کلاینت زبان، نقطه ورود سرور زبان، package.json آنها و فایلهای مکملشان (مانند نحوههای نوشتن، تنظیمات، راهنما و غیره) را کنار هم بستهبندی کنید
