Building a TypeScript library, some setbacks

Question

I want to build a TypeScript library to handle a recurring need across multiple non-node servers (websites). I want to be able to simply have one minified JS file as a result that contains all the code and the required modules (like a CDN: here).

My webpack config:

{
  "private": true,
  "scripts": {
    "bundle": "webpack --config webpack.config.js"
  },
  "devDependencies": {
    "@webpack-cli/generators": "^2.5.0",
    "axios": "^1.1.2",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.7.4"
  }
}

My ts config:

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es2017",
    "module": "commonjs",
    "declaration": true,
    "esModuleInterop": true,

    "incremental": true,
    "skipLibCheck": true,

    "strict": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictPropertyInitialization": false,
    "noImplicitReturns": true,
  },
  "include": [
    "./lib/**/*"
  ]
}

My directory structure looks like this:

module
-dist/
-lib/
--types/
--- ** I have here different types
--services/
--- ** I expect to have services here, empty for now
--index.ts
-node_modules/
-package.json
-package-lock.json
-tsconfig.json
-webpack.config.js

My index.ts:

import {type1} from './types/type1';
import {type2} from './types/type2';
....
   
export default class init{

 private readonly axios: object;
  constructor() {
    this.axios = require('axios').default;
    this.init();
  }

  init(){
    console.log('loaded')
    console.log(this.axios)
  }
}

After I run webpack, I include the resulting main.js in my index.html to test. I expect to have the library available. But the class init() is never defined..I tried exporting a function instead, or not exporting anything and it did not work. Can someone shed some light on the process ?

"*I expect to have the library available*" - how did you import it? Did you `import init from 'main.js'`? — Bergi, Oct 10 '22 at 23:11
@Terry it is a long minified string ```!function(e,t){"object"==typeof exports&&"object"==typeof ...``` — fennec, Oct 10 '22 at 23:50
@Bergi no I did not. I am trying to have the library available simply with the the script tag..just like a CDN — fennec, Oct 10 '22 at 23:52
@fennec Then you will need to instruct the compiler/bundler to expose the default export of your entry point module as a global variable. — Bergi, Oct 10 '22 at 23:53
@Bergi is that how those minified CDNs are created ? I would much rather go with the convention. How would I do that with webpack ? — fennec, Oct 11 '22 at 00:02
@fennec That has nothing to do with a CDN, that's just how libraries work that you include as a script. There's also libraries (both CDN-provided and not) that are ES6 modules which need to be `import`ed. (If you ask me, this is superior, but not everyone seems to be ready for this). — Bergi, Oct 11 '22 at 00:08
@fennec See https://webpack.js.org/concepts/entry-points/ and in particular https://webpack.js.org/configuration/output/#outputlibrary — Bergi, Oct 11 '22 at 00:09
Possible duplicate of https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack — Bergi, Oct 11 '22 at 00:10

Building a TypeScript library, some setbacks

0 Answers0