Markdown All in One Documentation

Packaging

Overview

Our product is bundled by webpack, then packaged by vsce.

We build two kinds of VSIX packages on CI:

  • Production: Optimized by webpack. Only contains indispensable files. Ready for deployment.
  • Debug: No optimization. Built by webpack in development mode. Intended for debugging and profiling.

In practice, they only differ in optimization level. We just change the NODE_ENV environment variable, then our build script will set the actual build command accordingly:

  • Production: webpack --mode production
  • Debug: webpack --mode development

Determining modules needed by the packages

The packages share the same vscodeignore.

First find what to check in step 1 and 2. Then determine what are required in step 3 and 4. Be careful about dependence tree.

  1. Find dependencies that vsce packs by default:
    • Run npm ls --production --parseable to get the list.
    • Run npm ls --production to know their relationships.
  2. Find modules that webpack can bundle:
    1. Check its configuration webpack.config.js.
    2. Analyze the bundle according to webpack's instructions.
    3. Run npx webpack --mode development.
  3. Determine those needed by VS Code:
    • In package.json, files under contributes.markdown.* are always needed.
  4. Examine others manually:
    • Read the bundle analysis reports generated during step 2 carefully.
    • When in doubt, search in the bundle (JavaScript file).
    • Remember to check modules contributed by extendMarkdownIt().
    • Remember to check resource files that our code dynamically loads.

After creating a new vscodeignore file, run vsce ls to verify your design.

References