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

Concealing a VueJs component on specific pages

The compatibility of return value types between the constructor signature and the call signature interface is not maintained when they are used together

The arrangement of checkboxes in RTL is not optimal

Incorporating TypeScript with jQuery for efficient AJAX operations

Angular - Dividing Functionality into Multiple Modules

Verify the occurrence of an element within an array inside of another array

What is the process for filtering out a particular version of an npm package?

What is the reason behind the mandatory credentials option for the CredentialsProvider?

Compiling Vue with TypeScript: Troubleshooting common errors

Encountering a Connection Timeout Issue with Mssql in Node.js

Encountering problems while trying to install Bower

Are the effects of deleting the node_module similar to running the command "npm cache clean --force"?

Building a dropdown menu component in react native

Create an asynchronous method within an object-oriented programming (OOP) class

Facing a EACCES symlink error while trying to setup expo-cli

I'm having trouble retrieving my variable within the socketcluster's socket.on function

Can someone please explain how I can extract and display information from a database in separate text boxes using Angular?

Arranging Angular Array-like Objects

Does the NPM publish feature copy all files to the NPM server?

NodeJS function does not pause for the PostgreSQL database call despite using await keyword