Add code bundling with webpack (#596)

* Optimize size with webpack

Signed-off-by: Fred Bricon <fbricon@gmail.com>

* Add bundling yaml-ls code

Signed-off-by: Yevhen Vydolob <yvydolob@redhat.com>

* fix test run

Signed-off-by: Yevhen Vydolob <yvydolob@redhat.com>

* include only needed prettier files

Signed-off-by: Yevhen Vydolob <yvydolob@redhat.com>

Co-authored-by: Fred Bricon <fbricon@gmail.com>

Author: evidolob

.gitignore

@@ -1,4 +1,7 @@
 node_modules/
 out/
+dist/
 .vscode-test/
 test/testFixture/.vscode
+*.vsix
+.DS_Store

.prettierignore

@@ -1,3 +1,4 @@
 .vscode-test
 out
 syntaxes/
+dist

.vscode/launch.json

@@ -10,7 +10,7 @@
       "args": ["--extensionDevelopmentPath=${workspaceRoot}"],
       "stopOnEntry": false,
       "sourceMaps": true,
-      "outFiles": ["${workspaceRoot}/out/src/**/*.js"],
+      "outFiles": ["${workspaceRoot}/dist/**/*.js"],
       "preLaunchTask": "compile typescript",
       "env": {
         "VSCODE_REDHAT_TELEMETRY_DEBUG":"true"
@@ -21,6 +21,7 @@
       "type": "extensionHost",
       "request": "launch",
       "runtimeExecutable": "${execPath}",
+      "preLaunchTask": "compile test",
       "args": [
         "--disable-extension=ms-kubernetes-tools.vscode-kubernetes-tools",
         "--extensionDevelopmentPath=${workspaceFolder}",

.vscode/tasks.json

@@ -18,6 +18,21 @@
       "isBackground": true,
       // use the standard tsc in watch mode problem matcher to find compile problems in the output.
       "problemMatcher": "$tsc-watch"
+    },
+    {
+      "label": "compile test",
+      // the command is a shell script
+      "type": "shell",
+      // we run the custom npm script "compile" as defined in package.json
+      "command": "yarn test-compile",
+      // show the output window only if unrecognized errors occur.
+      "presentation": {
+        "reveal": "never"
+      },
+      // The tsc compiler is started in watching mode
+      "isBackground": true,
+      // use the standard tsc in watch mode problem matcher to find compile problems in the output.
+      "problemMatcher": "$tsc-watch"
     }
   ]
 }

.vscodeignore

@@ -1,9 +1,13 @@
 .vscode/**
 typings/**
-out/test/**
+out/**
 test/**
 src/**
 images/**
+node_modules/**
+scripts/**
+Jenkinsfile
+prettier*
 **/*.map
 .gitignore
 .github/**
@@ -14,3 +18,6 @@ CONTRIBUTING.md
 .vscode-test/**
 **/**.vsix
 **/**.tar.gz
+!node_modules/prettier/index.js
+!node_modules/prettier/third-party.js
+!node_modules/prettier/parser-yaml.js

package.json

@@ -48,7 +48,7 @@
     "autocompletion",
     "validation"
   ],
-  "main": "./out/src/extension",
+  "main": "./dist/extension",
   "contributes": {
     "languages": [
       {
@@ -190,12 +190,14 @@
   "scripts": {
     "build": "yarn run clean && yarn run lint && yarn run vscode:prepublish",
     "check-dependencies": "node ./scripts/check-dependencies.js",
-    "clean": "rimraf out",
-    "compile": "tsc -watch -p ./",
+    "clean": "rimraf out && rimraf dist",
+    "compile": "webpack --mode none",
     "format": "prettier --write .",
     "lint": "eslint -c .eslintrc.js --ext .ts src test",
-    "test": "sh scripts/e2e.sh",
-    "vscode:prepublish": "tsc -p ./"
+    "test": "yarn test-compile && sh scripts/e2e.sh",
+    "vscode:prepublish": "webpack --mode production",
+    "watch": "webpack --mode development --watch --info-verbosity verbose",
+    "test-compile": "tsc -p ./"
   },
   "devDependencies": {
     "@types/chai": "^4.2.12",
@@ -217,9 +219,13 @@
     "rimraf": "^3.0.2",
     "sinon": "^9.0.3",
     "sinon-chai": "^3.5.0",
+    "ts-loader": "^9.2.5",
     "ts-node": "^3.3.0",
     "typescript": "4.1.2",
-    "vscode-test": "^1.4.0"
+    "umd-compat-loader": "^2.1.2",
+    "vscode-test": "^1.4.0",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0"
   },
   "dependencies": {
     "@redhat-developer/vscode-redhat-telemetry": "0.4.2",

src/extension.ts

@@ -87,10 +87,7 @@ export async function activate(context: ExtensionContext): Promise<SchemaExtensi
   telemetry.sendStartupEvent();
 
   // The YAML language server is implemented in node
-  const serverModule = context.asAbsolutePath(
-    path.join('node_modules', 'yaml-language-server', 'out', 'server', 'src', 'server.js')
-  );
-
+  const serverModule = context.asAbsolutePath(path.join('.', 'dist', 'languageserver.js'));
   // The debug options for the server
   const debugOptions = { execArgv: ['--nolazy', '--inspect=6009'] };
 

webpack.config.js

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license.
+
+//@ts-check
+
+'use strict';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+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/
+  node: {
+    __dirname: false,
+    __filename: false,
+  },
+  entry: {
+    extension: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+    languageserver: './node_modules/yaml-language-server/out/server/src/server.js',
+  },
+  output: {
+    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].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/
+    prettier: 'commonjs prettier',
+  },
+  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',
+          },
+        ],
+      },
+      {
+        test: /node_modules[\\|/](vscode-json-languageservice)/,
+        use: { loader: 'umd-compat-loader' },
+      },
+    ],
+  },
+};
+module.exports = config;