How to upload a TypeScript package to NPM for installation using both import and CDN methods

Question

How to upload a TypeScript package to NPM for installation using both import and CDN methods

I am eager to publish my TypeScript project on NPM. I am currently using the TypeScript Compiler (tsc) to transpile the .ts files of my project into output .js file(s).

To generate the output files, I simply use the tsc command.

Here is my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "dist",
    "declaration": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5"
  }
}

Once published, my package can be installed using:

npm install mypackagename

and can be imported in TypeScript like so:

import MyLib from 'mypackagename'

It works! However, I am interested in offering two types of installations: through npm/import (as shown above) and via CDN:

<script src="//unpkg.com/mypackagename"></script>

Is this possible? Do I need to utilize a bundler instead of the TypeScript Compiler?

Currently, it seems impossible as I am unable to directly use commonjs code in a browser.

typescript npm

Answer 1

Answer №1

After much anticipation, I implemented the Webpack bundler with specific configurations: output.library and output.libraryTarget by using UMD.

libraryTarget: 'umd' - This setting exposes your library within all module definitions, enabling compatibility with CommonJS, AMD, and as a global variable. Refer to the UMD Repository for further insights.

Hence, my webpack.config.js appears as follows:

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-output-file.js',
    library: 'MyLib',
    libraryTarget: 'umd',
    libraryExport: 'default',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

Moreover, the tsconfig.json structure looks like this:

{
  "compilerOptions": {
    "outDir": "dist",
    "moduleResolution": "node",
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Thanks to these developments, my package now supports installation via import in ES6/TypeScript:

import MyLib from 'my-lib'

...or alternatively through unpkg CDN:

<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e535767266350504f415f41">[email protected]</a>"></script>
<script>
    var inst = new MyLib()
</script>

Explore the source code of my endeavor at: https://github.com/cichy380/simple-custom-event

Answer 2

After much anticipation, I implemented the Webpack bundler with specific configurations: output.library and output.libraryTarget by using UMD.

libraryTarget: 'umd' - This setting exposes your library within all module definitions, enabling compatibility with CommonJS, AMD, and as a global variable. Refer to the UMD Repository for further insights.

Hence, my webpack.config.js appears as follows:

const path = require('path')

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-output-file.js',
    library: 'MyLib',
    libraryTarget: 'umd',
    libraryExport: 'default',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
}

Moreover, the tsconfig.json structure looks like this:

{
  "compilerOptions": {
    "outDir": "dist",
    "moduleResolution": "node",
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Thanks to these developments, my package now supports installation via import in ES6/TypeScript:

import MyLib from 'my-lib'

...or alternatively through unpkg CDN:

<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e535767266350504f415f41">[email protected]</a>"></script>
<script>
    var inst = new MyLib()
</script>

Explore the source code of my endeavor at: https://github.com/cichy380/simple-custom-event

How to upload a TypeScript package to NPM for installation using both import and CDN methods

Answer №1

Similar questions

Utilizing npm within a Rails application, hosted on the Heroku platform

Discovering duplicates for properties within an array of objects in React.js and assigning a sequential number to that specific field

Can you explain the purpose of the "-g" flag when used in the command "npm install -g <something>"?

Having trouble establishing a connection to the TyreORM Module database while using a Postgres Docker image

What is the best method for showing the route on a ReactGoogleMap?

The TypeScript optional callback parameter is not compatible with the anonymous function being passed to it

Visual Studio build is disrupted by the presence of node_modules folder

Fulfill the promise once the callback has been triggered

Creating localized versions of your React application is a breeze with i18next JSON mapping

Mistakes that occur while trying to expand a base class to implement CRUD functionality

When you sign up for the service, you might receive null values in return

Obtain the selector from the parent element

Initializing variables in Angular2 templates

Is it possible for OpenFin to store logs in a secure database and what is the process for accessing logs located at %LocalAppData%openfinapps<app>app.log

Runtime error caused by incorrect Typescript version detected in Visual Studio Code

What is the best way to categorize elements in an array of objects with varying sizes based on two distinct properties in JavaScript?

Utilize the power of meteor-dburles-collection-helpers in TypeScript for optimizing your collections

Can [email protected] be used to test *.ts files?

Node.js built-ins require shims, while global variable names are absent

Graphql is a revolutionary method for structuring entities in a hierarchical schema