Add webpack for extension bundling (#471)

* update extension to use webpack for compilation

* update webpack related scripts and settings

* update changelog

* fix excluding external jest-config

* ignore .vsix files

Author: stephtr

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 out/
 
 **/.DS_Store
+*.vsix

.vscode/launch.json

@@ -1,29 +1,31 @@
-// A launch configuration that compiles the extension and then opens it inside a new window
 {
-    "version": "0.1.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Debug Tests",
-            "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
-            "cwd": "${workspaceRoot}",
-            "args": [
-                "--i",
-                "--config",
-                "jest.json"
-            ]
-        },
-        {
-            "name": "Launch Extension",
-            "type": "extensionHost",
-            "request": "launch",
-            "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
-            "stopOnEntry": false,
-            "sourceMaps": true,
-            "outDir": "${workspaceRoot}/out/src",
-            "preLaunchTask": "npm"
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Tests",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "cwd": "${workspaceRoot}",
+      "args": ["--i", "--config", "jest.json"]
+    },
+    {
+      "name": "Launch Extension (development)",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "watch"
+    },
+    {
+      "name": "Launch Extension (production)",
+      "type": "extensionHost",
+      "request": "launch",
+      "runtimeExecutable": "${execPath}",
+      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "preLaunchTask": "npm: compile"
+    }
+  ]
 }

.vscode/tasks.json

@@ -1,30 +1,29 @@
-// Available variables which can be used inside of strings.
-// ${workspaceRoot}: the root folder of the team
-// ${file}: the current opened file
-// ${fileBasename}: the current opened file's basename
-// ${fileDirname}: the current opened file's dirname
-// ${fileExtname}: the current opened file's extension
-// ${cwd}: the current working directory of the spawned process
-
-// A task runner that calls a custom npm script that compiles the extension.
 {
-    "version": "0.1.0",
-
-    // we want to run npm
-    "command": "npm",
-
-    // the command is a shell script
-    "isShellCommand": true,
-
-    // show the output window only if unrecognized errors occur.
-    "showOutput": "silent",
-
-    // we run the custom script "compile" as defined in package.json
-    "args": ["run", "compile", "--loglevel", "silent"],
-
-    // The tsc compiler is started in watching mode
-    "isWatching": true,
-
-    // use the standard tsc in watch mode problem matcher to find compile problems in the output.
-    "problemMatcher": "$tsc-watch"
-}
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "watch",
+      "type": "npm",
+      "script": "watch",
+      "isBackground": true,
+      "problemMatcher": [
+        {
+          "owner": "custom",
+          "pattern": [
+            {
+              "regexp": "^PATTERN WON'T MATCH, BUT NEEDED TO BE A VALID PROBLEM MATCHER$",
+              "file": 1,
+              "location": 2,
+              "message": 3
+            }
+          ],
+          "background": {
+            "activeOnStart": true,
+            "beginsPattern": "^Compilation\\s+starting",
+            "endsPattern": "^Compilation\\s+finished"
+          }
+        }
+      ]
+    }
+  ]
+}

.vscodeignore

@@ -4,7 +4,6 @@ src/**
 **/*.map
 .gitignore
 tsconfig.json
-vsc-extension-quickstart.md
 integrations/**
 **/__mocks__/**
 **/tests/**
@@ -18,3 +17,7 @@ yarn.lock
 yarn-error.log
 scripts/
 coverage
+.github/**
+images/**
+!images/vscode-jest.png
+webpack.config.js

CHANGELOG.md

@@ -23,6 +23,8 @@ Bug-fixes within the same version aren't needed
 
 * replaced deprecated vscode.previewHtml command with webview - qalex
 
+* use webpack for compilation, resulting in a much smaller extension size - stephtr
+
 ### 2.9.1
 
 * Prevent ANSI escape codes from appearing in test messages - seanpoulter

package.json

@@ -29,7 +29,7 @@
     "workspaceContains:node_modules/react-native-scripts",
     "onCommand:io.orta.jest.start"
   ],
-  "main": "./out/src/extension",
+  "main": "./out/extension",
   "icon": "images/vscode-jest.png",
   "contributes": {
     "languages": [
@@ -233,11 +233,12 @@
     "precommit": "lint-staged",
     "ci": "yarn lint && yarn test --coverage",
     "clean-out": "rimraf ./out",
-    "vscode:prepublish": "yarn clean-out && tsc -p ./tsconfig.publish.json",
-    "compile": "tsc -watch -p ./tsconfig.publish.json",
+    "vscode:prepublish": "yarn clean-out && yarn compile",
+    "compile": "webpack --mode production",
+    "watch": "webpack --mode development --watch --info-verbosity verbose",
     "lint": "tslint -c tslint.json 'src/**/*.ts' 'tests/**/*.ts'",
     "postinstall": "node ./node_modules/vscode/bin/install",
-    "test": "tsc && jest",
+    "test": "jest",
     "watch-test": "yarn test -- --watch",
     "prettier": "prettier",
     "prettier-write": "yarn prettier --parser typescript --no-semi --single-quote --trailing-comma es5 --write --print-width 120",
@@ -248,26 +249,27 @@
     "@types/node": "^8.0.31",
     "coveralls": "^3.0.0",
     "danger": "^2",
+    "elegant-spinner": "^1.0.1",
     "glob": "^7.1.1",
     "husky": "^0.14.3",
+    "istanbul-lib-coverage": "^1.1.1",
+    "istanbul-lib-source-maps": "^1.1.0",
     "jest": "^24.7.0",
+    "jest-editor-support": "^26.0.0-beta",
+    "jest-snapshot": "^24.7.0",
     "lint-staged": "^4.2.3",
+    "micromatch": "^2.3.11",
     "prettier": "^1.17.0",
     "rimraf": "^2.6.2",
     "ts-jest": "^24.0.2",
+    "ts-loader": "^6.0.4",
     "tslint": "^5.16.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.4.3",
-    "typescript-tslint-plugin": "^0.3.1"
-  },
-  "dependencies": {
-    "elegant-spinner": "^1.0.1",
-    "istanbul-lib-coverage": "^1.1.1",
-    "istanbul-lib-source-maps": "^1.1.0",
-    "jest-editor-support": "^26.0.0-beta",
-    "jest-snapshot": "^24.7.0",
-    "micromatch": "^2.3.11",
-    "vscode": "^1.1.33"
+    "typescript-tslint-plugin": "^0.3.1",
+    "vscode": "^1.1.33",
+    "webpack": "^4.35.0",
+    "webpack-cli": "^3.3.4"
   },
   "__metadata": {
     "id": "7997a8ae-1fae-4022-b834-12f6318aeffd",

tsconfig.json

@@ -20,5 +20,5 @@
       }
     ]
   },
-  "exclude": ["integrations", "__mocks__"]
+  "exclude": ["integrations", "__mocks__", "node_modules"]
 }

tsconfig.publish.json

@@ -15,6 +15,7 @@
     "member-access": false,
     "interface-name": false,
     "no-empty": [true, "allow-empty-catch", "allow-empty-functions"],
-    "no-this-assignment": [true, { "allow-destructuring": true }]
+    "no-this-assignment": [true, { "allow-destructuring": true }],
+    "no-implicit-dependencies": [true, "dev"]
   }
 }

tslint.json

@@ -0,0 +1,49 @@
+//@ts-check
+
+'use strict';
+
+const path = require('path');
+
+/**@returns {import('webpack').Configuration}*/
+module.exports = (env, argv) => {
+  const isProduction = argv.mode === 'production';
+  const isDevelopment = !isProduction;
+
+  /**@type {any} */
+  const externals = [
+    {'jest-config': 'root {}'}, // the jest-config module isn't utilized in this plugin, compiling it would result in unnecessary overhead and errors    
+    { 'vscode': 'commonjs vscode' } // the vscode-module is created on-the-fly and must be excluded.
+  ];
+
+  // during development keep the largest external dependencies out of the bundle in order to speed up build time
+  if (isDevelopment) {
+    externals.push('typescript', /^\@babel\/.*/, 'babylon');
+  }
+  return {
+    context: __dirname,
+    target: 'node',
+    entry: './src/extension.ts',
+    output: {
+      path: path.resolve(__dirname, 'out'),
+      filename: 'extension.js',
+      libraryTarget: 'commonjs2',
+      devtoolModuleFilenameTemplate: '../[resource-path]'
+    },
+    devtool: 'source-map',
+    externals,
+    resolve: {
+      extensions: ['.ts', '.js']
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          exclude: /node_modules/,
+          use: [
+            { loader: 'ts-loader' }
+          ]
+        }
+      ]
+    }
+  };
+};