Creating packages for multiple Typescript projects that rely on a shared local module

Question

Creating packages for multiple Typescript projects that rely on a shared local module

I am currently developing a series of VSTS extensions, with each extension being its own independent Node project complete with its own package.json file and node_modules folder. The structure of the folders is as follows:

 - MyExtension
   - package.json // containing all development dependencies
   - tslint.json
   - Tasks
     - tsconfig.json
     - Common
       - common.ts    // contains shared functionality across tasks
       - package.json // includes runtime dependencies for all projects
     - My1stTask
       - package.json // holds production dependencies
       - task.ts      // implementation of the task
     - ...
     - ...
     - My6thTask
       - package.json // holds production dependencies
       - task.ts      // implementation of the task

In order to fully separate VSTS build tasks, I have been duplicating the contents of the Common project into each task and then running tsc to convert them all to JavaScript.

While this method has worked, it requires constant copying of content from Common for testing purposes.

I attempted to use local file references by adding a dependency in each task's package.json to file:../common, which functions during development but doesn't include the common module in the task after generating the extension.

Coming from a C# background rather than Node development, I have searched extensively for a solution that integrates well with vsts-extensions.

npm pack does not seem to function as expected, as the extension demands that all files be present.
package.json/bundleDependencies shows promise but does not bundle the local file reference.
```
///<reference path="../common/common.ts"/>
```
works nicely for editing but fails to run after building the extension.
Project reference with prepend does not work, as build tasks require the commonjs module resolver. Systems and AMD are unable to load modules, and prepend only functions with the latter.

Is there a way to seamlessly make this setup work without resorting to bower or grunt, and simply ensuring that each MyXthTask has a copy of the local common module in their node_modules folder?

typescript npm azure-pipelines-build-task azure-devops-extensions

Answer 1

Answer №1

Attempting @matt-mccutchen's method proved unsuccessful for me when working with VSTS build tasks as they necessitate the use of commonjs:

"compilerOptions": {
  "module": "commonjs",
  "target": "es6",

Fortunately, I discovered a workaround that suits my needs.

I created a tsconfig.json file in the Tasks directory to establish my default configurations and incorporate files from the Common library:

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "strict": false,
    "strictNullChecks": false,
    "removeComments": true
  },
  "files": [
    "./Common/uuidv5.d.ts",
    "./Common/Common.ts"
  ]
}

For each task, I then crafted a separate tsconfig.json setting the output folder to the project's current directory and inheriting configurations from the main tsconfig.json in the Tasks folder:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
      "outDir": "./", 
      "sourceRoot": "./"
  },
  "files": [
      "InstallExtension.ts"
  ]
}

This setup results in:

 - MyExtension
   - package.json // includes dev-dependencies
   - tslint.json
   - Tasks
     - tsconfig.json   // Default including Common
     - Common
       - common.ts     // shared functionality across tasks
       - package.json  // runtime dependencies for Common
       - tsconfig.json // build config for common files, inherits from ..\Task\tsconfig.json
     - My1stTask
       - package.json  // prod-dependencies for the task
       - task.ts       // task implementation
       - tsconfig.json // build config for task, inherits from ..\Task\tsconfig.json
     - ...
     - My6thTask
       - package.json // prod-dependencies
       - task.ts      // task implementation
       - tsconfig.json // build config for task, inherits from ..\Task\tsconfig.json

During task compilation, the following structure is produced:

     - My6thTask
       - Common
         - Common.js   // Compiled common
       - My6thTask
         - task.js     // Compiled task
       - package.json  // prod-dependencies
       - task.ts       // task implementation
       - task.json     // defines task UI
       - tsconfig.json // build configuration for task

Included in task.ts was:

///<reference path="../Common/Common.ts"/>
import * as common from "../Common/Common";

The execution handler in task.json was adjusted to point to the new location:

  "execution": {
    "Node": {
      "target": "InstallExtension/InstallExtension.js", // changed from: InstallExtension.js
      "argumentFormat": ""
    }
  }

These modifications have proven successful :D. Combined with utilizing glob-exec, my clean build time has been reduced to under a minute:

"initdev:npm": "npm install & glob-exec --parallel --foreach \"Tasks/*/tsconfig.json\" -- \"cd {{file.dir}} && npm install\"",
"compile:tasks": "glob-exec \"Tasks/*/tsconfig.json\" -- \"tsc -b {{files.join(' ')}}\"",
"lint:tasks": "glob-exec --parallel --foreach \"Tasks/*/tsconfig.json\" -- \"tslint -p {{file}}\"",

Answer 2

Attempting @matt-mccutchen's method proved unsuccessful for me when working with VSTS build tasks as they necessitate the use of commonjs:

"compilerOptions": {
  "module": "commonjs",
  "target": "es6",

Fortunately, I discovered a workaround that suits my needs.

I created a tsconfig.json file in the Tasks directory to establish my default configurations and incorporate files from the Common library:

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "strict": false,
    "strictNullChecks": false,
    "removeComments": true
  },
  "files": [
    "./Common/uuidv5.d.ts",
    "./Common/Common.ts"
  ]
}

For each task, I then crafted a separate tsconfig.json setting the output folder to the project's current directory and inheriting configurations from the main tsconfig.json in the Tasks folder:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
      "outDir": "./", 
      "sourceRoot": "./"
  },
  "files": [
      "InstallExtension.ts"
  ]
}

This setup results in:

 - MyExtension
   - package.json // includes dev-dependencies
   - tslint.json
   - Tasks
     - tsconfig.json   // Default including Common
     - Common
       - common.ts     // shared functionality across tasks
       - package.json  // runtime dependencies for Common
       - tsconfig.json // build config for common files, inherits from ..\Task\tsconfig.json
     - My1stTask
       - package.json  // prod-dependencies for the task
       - task.ts       // task implementation
       - tsconfig.json // build config for task, inherits from ..\Task\tsconfig.json
     - ...
     - My6thTask
       - package.json // prod-dependencies
       - task.ts      // task implementation
       - tsconfig.json // build config for task, inherits from ..\Task\tsconfig.json

During task compilation, the following structure is produced:

     - My6thTask
       - Common
         - Common.js   // Compiled common
       - My6thTask
         - task.js     // Compiled task
       - package.json  // prod-dependencies
       - task.ts       // task implementation
       - task.json     // defines task UI
       - tsconfig.json // build configuration for task

Included in task.ts was:

///<reference path="../Common/Common.ts"/>
import * as common from "../Common/Common";

The execution handler in task.json was adjusted to point to the new location:

  "execution": {
    "Node": {
      "target": "InstallExtension/InstallExtension.js", // changed from: InstallExtension.js
      "argumentFormat": ""
    }
  }

These modifications have proven successful :D. Combined with utilizing glob-exec, my clean build time has been reduced to under a minute:

"initdev:npm": "npm install & glob-exec --parallel --foreach \"Tasks/*/tsconfig.json\" -- \"cd {{file.dir}} && npm install\"",
"compile:tasks": "glob-exec \"Tasks/*/tsconfig.json\" -- \"tsc -b {{files.join(' ')}}\"",
"lint:tasks": "glob-exec --parallel --foreach \"Tasks/*/tsconfig.json\" -- \"tslint -p {{file}}\"",

Answer 3

Answer №2

For those looking to streamline their tasks, consider utilizing project references with the prepend option. This method allows you to consolidate your output into a single file, provided that you have a compatible module loader.

If your project requires multiple-file outputs, check out this question for useful TypeScript insights and potential workarounds.

Answer 4

For those looking to streamline their tasks, consider utilizing project references with the prepend option. This method allows you to consolidate your output into a single file, provided that you have a compatible module loader.

If your project requires multiple-file outputs, check out this question for useful TypeScript insights and potential workarounds.

Answer 5

Answer №3

I had trouble with project references, so I decided to use webpack with ts-loader for building my projects.

I organized all the TypeScript code under a single root directory and used a single tsconfig file like this:

ts
 -core
 -plugin1
 -plugin2

With webpack 3.10, it is now possible to have multiple output configurations using a single config file:

const path = require("path");

const commonTsRule = {
  test: /\.tsx?$/,
  use: "ts-loader",
  exclude: /node_modules/,
};

const commonConfig = {
  devtool: "inline-source-map",
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

module.exports = [
  {
    ...commonConfig,
    entry: `${path.resolve(__dirname, "ts")}/plugin1/index.ts`,
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build/plugin1/js"),
    },
    module: {
      rules: [
        {
          ...commonTsRule,
          // customize rule if needed
        },
      ],
    },
  },
  {
    ...commonConfig,
    entry: `${path.resolve(__dirname, "ts")}/plugin2/index.ts`,
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build/plugin2/js"),
    },
    module: {
      rules: [
        {
          ...commonTsRule,
          // customize rule if needed
        },
      ],
    },
  },
];

This setup allows each project to be built from its own entry point to its designated output destination.

Answer 6

I had trouble with project references, so I decided to use webpack with ts-loader for building my projects.

I organized all the TypeScript code under a single root directory and used a single tsconfig file like this:

ts
 -core
 -plugin1
 -plugin2

With webpack 3.10, it is now possible to have multiple output configurations using a single config file:

const path = require("path");

const commonTsRule = {
  test: /\.tsx?$/,
  use: "ts-loader",
  exclude: /node_modules/,
};

const commonConfig = {
  devtool: "inline-source-map",
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

module.exports = [
  {
    ...commonConfig,
    entry: `${path.resolve(__dirname, "ts")}/plugin1/index.ts`,
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build/plugin1/js"),
    },
    module: {
      rules: [
        {
          ...commonTsRule,
          // customize rule if needed
        },
      ],
    },
  },
  {
    ...commonConfig,
    entry: `${path.resolve(__dirname, "ts")}/plugin2/index.ts`,
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "build/plugin2/js"),
    },
    module: {
      rules: [
        {
          ...commonTsRule,
          // customize rule if needed
        },
      ],
    },
  },
];

This setup allows each project to be built from its own entry point to its designated output destination.

Creating packages for multiple Typescript projects that rely on a shared local module

Answer №1

Answer №2

Answer №3

Similar questions

Leave the Private NPM Repository

Switching a REACT NATIVE js file to an Android Activity is a process that involves integrating

Tips for maintaining the menu state following a refresh

What could be the reason for my webpack project to encounter build failures when cloned from a GitHub repository?

Is it more efficient to have deps.ts per workspace or shared among workspaces?

Encountering issues with git while trying to execute 'npm

The installation of AngularJS libraries via npm was unsuccessful

Encountering an issue when attempting to execute the Jenkins job for running Cypress automation tests: The cypress npm library has been successfully installed, yet the Cypress binary file

Error Found: Unexpected Colon (:) in Vue TypeScript File

Troubleshooting image upload issues with AWS S3 in Next.js version 13

Distribute your SolidJS Typescript components on npm

Updating .babelrc to include the paths of JavaScript files for transpilation

Error encountered during compilation while attempting to import a JSON file in Angular 7

Error in Angular 7: params.map function is undefined

propagate the amalgamation of tuples as an argument

Steps for modifying the look of a button to display an arrow upon being clicked with CSS

Executing invisible reCAPTCHA2 in Angular 6: A step-by-step guide

Heroku is unable to locate a privately hosted NPM package

Access a .docx file on my device by utilizing the Microsoft JavaScript API

The error message "Property 'map' is not found on type 'User' in React with typescript"